如何在Marp/Marpit中创建占满整张幻灯片的三列布局

解决PDF留白问题 #

Marp 默认将单张幻灯片内容包裹在 <section> 标签中，你引入的 default 主题默认给 <section> 设置了内边距，你现有的CSS只重置了html、body的边距，没有覆盖<section>的默认样式，所以导出会有留白。
你只需要在 custom-theme.css 中添加 <section> 的样式重置即可，同时推荐将浮动布局替换为flex布局，避免浮动导致的排版异常：

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

@import 'default';

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

/* 新增section样式重置，清除默认边距 */
section {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.leftpane {
  width: 33%;
  height: 100%;
  background-color: rosybrown;
}

.middlepane {
  width: 34%;
  height: 100%;
  background-color: royalblue;
}

.rightpane {
  width: 33%;
  height: 100%;
  background-color: yellow;
}

解决字体大小、颜色不一致问题 #

出现样式差异有两个核心原因：

1. Marp的default主题默认给<section>下的h1、正文等元素设置了固定的字体大小、颜色、行高规则，你的现有CSS没有覆盖这些规则，所以会和直接打开HTML的效果不同
2. Marp导出PDF时调用内置Chromium的打印能力，字体 fallback 规则、渲染逻辑和你本地浏览器直接打开HTML的逻辑有差异，也会导致视觉效果不一致

你可以继续在custom-theme.css中针对性覆盖默认文本样式即可，示例如下：

/* 全局设置统一字体 */
section {
  font-family: "你需要的字体", sans-serif;
  color: #000;
}

/* 自定义h1样式，和HTML预览效果对齐 */
section h1 {
  font-size: 2rem;
  color: #000;
  margin: 0;
  padding: 1rem;
}

修改完成后重新执行你原有的导出命令，即可得到撑满全屏、样式符合预期的PDF幻灯片。

内容的提问来源于stack exchange，提问作者Wakan Tanka