Marp全局指令

来自泡泡学习笔记
跳到导航 跳到搜索
名称 描述
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关键字。


  • 自动缩小块

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

取自“http://bubblestudy.info/wiki/index.php?title=Marp全局指令&oldid=2252”