Marp全局指令

来自泡泡学习笔记
BrainBs讨论 | 贡献2023年10月28日 (六) 19:53的版本 (创建页面,内容为“ {| class="wikitable" |- ! 名称 ! 描述 |- | theme | 指定幻灯片集的主题。 |- | style | 指定自定义主题的CSS样式。 |- | headingDivider | 指定标题分隔选项。 |- | size | 尺寸。 |- | math | 数学库。 |- | auto-scaling | 自动缩放。 |} <br> ==主题== 使用theme全局指令选择一个主题。 <pre> <!-- theme: registered-theme-name --> </pre> 它识别添加到Marpit实例的themeSet中的主题名称。 <pre>…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳到导航 跳到搜索
名称 描述
theme 指定幻灯片集的主题。
style 指定自定义主题的CSS样式。
headingDivider 指定标题分隔选项。
size 尺寸。
math 数学库。
auto-scaling 自动缩放。



主题

使用theme全局指令选择一个主题。

 <!-- theme: registered-theme-name -->

它识别添加到Marpit实例的themeSet中的主题名称。


<!-- theme: default -->	
<!-- theme: gaia -->	
<!-- theme: uncover -->


自定义主题样式

通常,您可以通过<style>元素调整主题,但在另一个Markdown编辑器中打开时,可能会破坏文档的样式。因此,您可以使用style全局指令来代替<style>。

---
theme: base-theme
style: |
  section {
    background-color: #ccc;
  }
---


标题分隔符

您可以使用headingDivider全局指令,在标题前自动分隔幻灯片页面。此功能类似于Pandoc的--slide-level选项和Deckset 2的“Slide Dividers”选项。

它必须指定标题级别,范围从1到6,或它们的数组。如果数字,则该功能在级别大于或等于指定值的标题中启用;如果是数组,则仅在指定级别启用。


例如,下面的两个Markdown产生相同的输出。

常规语法
# 第一页

第一页的内容

---

## 第二页

### 第二页的内容

Hello, world!

---

# 第三页

😃


 标题分隔符

 <!-- headingDivider: 2 -->
 
 # 第一页 
 
 第一页的内容
 
 ## 第二页
 
 ### 第二页的内容
 
 Hello, world!
 
 # 第三页 
 
 😃

当您想从普通的Markdown创建幻灯片时,这将非常有用。即使在一般的编辑器中打开使用headingDivider的Markdown,它也能以美观的方式呈现,没有令人不悦的分隔线。


尺寸

您是否想要一个传统的4:3幻灯片尺寸?Marp Core增加了尺寸全局指令的支持。扩展的主题系统可以更轻松地切换幻灯片尺寸。

---
theme: gaia
size: 4:3
---

# A traditional 4:3 slide


Marp的内置主题提供了4K(3840x2160)、16:9(1280x720)、4:3(960x720)的预设尺寸。

/**
 * @theme foobar
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 * @size 4K 3840px 2160px
 */

section {
  /* A way to define default size is as same as Marpit theme CSS. */
  width: 960px;
  height: 720px;
}


数学库

支持Pandoc的Markdown样式的数学排版。通过使用$...$将公式包围起来,可以将数学渲染为行内格式,而使用$$...$$则可以将其渲染为块级格式。

渲染行内数学公式,如 $ax^2+bc+c$。

$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$


您可以在math全局指令(或JS构造器选项)中选择使用MathJax和KaTeX中的数学库进行排版。默认情况下,我们推荐使用MathJax进行更好的渲染和语法支持,但是如果有大量公式需要渲染,KaTeX的渲染速度更快。

通过math全局指令,Marp Core支持声明在当前Markdown中使用的数学库。


像这样在math全局指令中设置mathjax或katex:

---
# 在此Markdown中声明使用KaTeX
math: katex
---



自动缩放

Marp Core具有一些自动缩放功能:

  • 标题适应:通过在# <!--fit-->中添加此注释,可以获得更适合幻灯片的大标题。
  • 代码块和KaTeX块自动缩小:防止块从幻灯片的右侧突出。

如果在使用的主题CSS中定义了@auto-scaling元数据,则可以使用自动缩放功能。

/*
 * @theme foobar
 * @auto-scaling true
 */

true: 启用所有功能。
fittingHeader: 启用标题适应功能。
math: 启用KaTeX数学块的缩放。请注意,MathJax数学块将始终应用自动缩放。
code: 启用代码块的缩放功能。

Marp Core的所有内置主题都准备好使用全功能的自动缩放。如果您是主题作者,可以使用元数据关键字来控制启用自动缩放的目标元素。

此功能依赖于内联SVG,请注意,如果在构造器选项中设置了inlineSVG: false以禁用Marpit的inlineSVG模式,则此功能将无效。

自动缩放功能设计用于水平缩放。在垂直方向上,如果周围有大量内容,缩放后的元素仍然可能突出幻灯片的顶部和底部。


  • 标题适应

当标题中包含<!--fit-->注释时,标题的大小将调整以适应幻灯片尺寸。

# <!-- fit --> 适应标题

此语法类似于Deckset的[fit]关键字,但我们使用HTML注释在渲染为文档的Markdown中隐藏fit关键字。


  • 自动缩小块

某些块将缩小以适应幻灯片。这对于防止块从幻灯片的右侧突出非常有用。