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

Question

如何在 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 {
    width: 100%;
    height: 100%;
  }
  
  .leftpane {
      width: 33%;
      height: 100%;
      float: left;
      background-color: rosybrown;
      border-collapse: collapse;
  }
  
  .middlepane {
      width: 34%;
      height: 100%;
      float: left;
      background-color: royalblue;
      border-collapse: collapse;
  }
  
  .rightpane {
    width: 33%;
    height: 100%;
    position: relative;
    float: right;
    background-color: yellow;
    border-collapse: collapse;
  }
  
  /* .toppane {
    width: 100%;
    height: 100px;
    border-collapse: collapse;
    background-color: #4da6ff;
  } */

Run Code Online (Sandbox Code Playgroud)

---
marp: true
theme: custom-theme

---

**slide.md**
<!-- slide.md -->

<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>

<!-- /sf/ask/2566389871/ -->

Run Code Online (Sandbox Code Playgroud)

我用来生成 PDF 的代码：

marp --html --bespoke.progress --allow-local-files --theme-set custom-theme.css --pdf -- slide.md -o slide.pdf

Run Code Online (Sandbox Code Playgroud)

HTML中使用的CSS并在浏览器中显示

marp生成的PDF文件

如何将 PDF 中的列拉伸至完整幻灯片尺寸？PS：为什么字体有不同的大小和颜色？

谢谢

Answer 1

wor*_*ise 1

请改用此解决方案：https ://github.com/orgs/marp-team/discussions/192

---
marp: true
style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css');
---

# Multi columns in Marp slide

<div class="grid grid-cols-2 gap-4">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.

</div>
<div>

## Column 2

Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.

</div>
</div>

Run Code Online (Sandbox Code Playgroud)

您应该能够将 grid-cols-2 更改为 grid-cols-3。

归档时间：	4 年，2 月前
查看次数：	2855 次
最近记录：	3 年，4 月前