Marp精华总结（三）高级篇

概述

高级篇主要涉及：

• 使用Marp内置的主题
• 文档内自定义样式
• 创建自定义主题

通过使用主题和自定义样式，你可以更好的控制幻灯的最终效果。而通过开发自己的主题，你可以在多个Marp幻灯中复用这些主题。

系列目录

• Marp精华总结（一）基础篇
• Marp精华总结（二）进阶篇
• Marp精华总结（三）高级篇

使用Marp内置主题

Marp内置三个主题default、gaia和uncover。

通过theme指令，可以切换主题。

theme: default
theme: gaia
theme: uncover

• default：默认主题，它基于 GitHub Markdown 风格，但针对幻灯片进行了优化。幻灯片内容将始终垂直居中。
• gaia：盖亚，一个米黄色主题
• uncover: 是原始样式，设定了一定的标题和居中样式，很适合基于此开发自己的主题

主题反色

通过以下设定，获取对应主题的反色方案：

class: invert

改变主题的默认文字对齐方式

通过以下设定，可以

theme: gaia
class: lead

-gaia主题默认设置标题与文本都是左上角对齐。但是你可以使用class: lead来设定文本和标题居中

修改Gaia主题的配色

Gaia 主题的配色方案由 CSS 变量定义,你可以在<style>中定义和修改它们：

<style>
:root {
  --color-background: #fff;
  --color-foreground: #333;
  --color-highlight: #f96;
  --color-dimmed: #888;
}
</style>

修改Uncover 主题的配色

和Gaia主题一样，Uncover主题的配色方案也是由CSS变量定义,你可以在<style>中定义和修改它们：

<style>
:root {
  --color-background: #ddd;
  --color-background-code: #ccc;
  --color-background-paginate: rgba(128, 128, 128, 0.05);
  --color-foreground: #345;
  --color-highlight: #99c;
  --color-highlight-hover: #aaf;
  --color-highlight-heading: #99c;
  --color-header: #bbb;
  --color-header-shadow: transparent;
}
</style>

自定义样式

Marp默认支持<style>标签形式来自定义样式，在YAML头之后，所有页面开始之前，可以使用<style>...</style>来编写自己的样式。<font style="color:rgb(31, 35, 40);"><style scoped></font>可以只应用在当页。

但是在设定自定义样式之前，你需要了解Marp最终的HTML结构。

深入了解HTML结构

页面结构

通过实际导出Marp生成的幻灯为.html文件，可以看到实际的页面代码：

<svg data-marpit-svg="" viewBox="0 0 1280 720">
  <foreignObject width="1280" height="720">
    <section id="14" data-paginate="true" 
    data-heading-divider="2" lang="zh-CN" data-marpit-pagination="14"
      style="--paginate:true;--heading-divider:2;" 
      data-marpit-pagination-total="36">
      <h2 id="%E4%BF%AE%E6%94%B9%E8%83%8C%E6%99%AF%E8%89%B2">修改背景色</h2>
      <h3 id="%E5%85%A8%E5%B1%80%E4%BF%AE%E6%94%B9">全局修改</h3>
    </section>
  </foreignObject>
</svg>

其中：生成的页面被包含在一个section标签中，并赋予一个id，对h2、h3等标题会创建同名的id。

行内代码

行内代码使用的是<code>标签：

<code>...</code>

代码块

marp的代码块使用的是经典的<pre>套<code>结构。

<pre is="marp-pre" data-auto-scaling="downscale-only">
  <code>
    //这里是代码...
  </code>
</pre>

创建页面目录

可以通过[页面标题](#页面id)创建指向指定页面的内链，也就可以基于此创建页面目录。其中页面id就是section标签的i通常为一个整数。

用名称直接定位标题

也可以通过[标题](#标题id)创建指向指定标题的内链，也就可以实现到具体标题的导航目录：

- [设定背景图片](#设定背景图片)

创建自定义页面类

通过在CSS创建section标签的子类，可以创建自定义页面类，搭配class指令，可以创建扩展的页面样式。

/* 目录页 */
section.toc{

}

<!-- _class: toc -->
## 目录
...

实现目录页分栏效果

/* 目录页 */
section.toc ul{
  margin-left:0px;
  padding-left:0px;
  column-count:2; 
}

section.toc ul li{
  list-style-type: none;
  background-color:#eee;
}

section.toc ul li a{
  color:#444;
}

:root 伪类选择器

在Marpit的上下文中，:root伪类表示幻灯片页面的每个<section>元素。

创建自定义主题

在幻灯文档中用<style>直接定义样式虽然很方便，但是如果要在多个幻灯文档中使用相同的样式，就需要手动复制了，而且样式部分占据顶部大量空间，可能会影响书写体验。

为此好的办法是将写好的自定义样式，存储为一个外部的.css文件，然后以自定义主题的形式在各个幻灯中引用。

创建设置文件

创建一个.css文件，在Marp设置中，选择工作区，在最底部Themes选项中点击“添加项”按钮，手动添加作为主题的.css文件名。

设置完成后会在当前工作区，也就是根目录下，自动创建.vscode文件夹，和其中的settings.json文件。

打开settings.json，可以看到配置项和值，后续你可以继续手动更改或通过选项设置。

比较完整的settings.json：

{
  "markdown.marp.breaks": "on",               // 渲染换行符
  "markdown.marp.chromePath": "",             // 浏览器路径
  "markdown.marp.enableHtml": true,           // 启用所有HTML标签
  "markdown.marp.exportType": "pdf",          // 默认的导出文件类型
  "markdown.marp.mathTypesetting": "mathjax", // 默认的数学渲染引擎
  "markdown.marp.outlineExtension": true,     // 启用大纲视图
  "markdown.marp.pdf.noteAnnotations": true,  // 将注释作为备注添加到导出的PDF中
  "markdown.marp.pdf.outlines": "headings",   // 在导出的PDF中添加书签
  "markdown.marp.strictPathResolutionDuringExport": false, // 导出禁用严格的路径解析
  "markdown.marp.themes": [                   // 声明主题样式文件
    "theme1.css",
  ],
}

CSS文件

test.css内容如下：

/* @theme test1 */

@import 'uncover';

section{
    color: aqua;
}

其中：

• /* @theme test1 */用于定义主题的名称
• @import 'uncover';用于引入uncover主题样式，可以基于此进行样式的修改
• 剩余部分写自己的样式代码即可

实现自定义幻灯尺寸

/**
* @theme theme1
* @auto-scaling fittingHeader,math
* @size 4:3 960px 720px
* @size 16:9 1280px 720px
* @size 3:4 30cm 40cm
*/

@import "default";

@import url("https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/base16/pico.min.css");

引入代码高亮样式

@import url("https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/base16/pico.min.css");