标签: marpit

如何在 Marp/Marpit 中创建全幻灯片大小的拉伸三列

我正在使用 marp/marpit 来创建幻灯片。我的目标是创建具有三个垂直列的幻灯片。我有一个 CSS 文件，我在 HTML 页面和 marp 中使用它。在网络浏览器中，HTML 页面会扩展到整个页面。但在 PDF 查看器（由 marp 生成的文件）中，幻灯片有一些从左/右上/下的边框。

我正在使用的文件：

页面.html

<!DOCTYPE html>
<html>

<!-- page.html -->

<head>
    <!-- <link rel="stylesheet" href="css.css"> -->
    <link rel="stylesheet" href="custom-theme.css">
</head>

<body>
    <div class="container">
        <!-- <div class="toppane">Test Page</div> -->
        <div class="leftpane">
            <h1>Left column</h1>
        </div>
        <div class="middlepane">
            <h1>Middle column</h1>
        </div>
        <div class="rightpane">
            <h1>Right column</h1>
        </div>
    </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

自定义主题.css

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  .container { …

Run Code Online (Sandbox Code Playgroud)

html css marpit marp

Wak*_*nka

lucky-day

6
推荐指数

1
解决办法

2855
查看次数

如何在 Marp 或 Marpit 中将图像对齐到文本标题下方

我通过 VScode 使用 Marpit。这是 mi 最小工作示例：

---
marp: true
---

This should go in to the header and picture should be bellow it, but right now it is the middle of the picture

![bg contain](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

Run Code Online (Sandbox Code Playgroud)

这段代码的问题是它生成的幻灯片中文本和图像居中对齐，如下图所示：