查看“Marp使用指南”的源代码

==简介==
使用纯Markdown编写演示文稿的生态系统。


支持的输出类型
*HTML
*PDF
*PPTX (PowerPoint document)
*PNG (First slide only)
*JPEG (First slide only)

<br>

==功能开启方法==
当在Markdown文档的前置元数据中写入"marp: true"时，Marp功能将启用。

 ---
 marp: true
 --- 
 
 # Your slide deck 
 
 Start writing!


<br>

==Marpit Markdown==
Marpit（/mɑːrpɪt/）是一个轻量级框架，用于从Markdown创建幻灯片。它可以将Markdown和CSS主题转换为由静态HTML和CSS组成的幻灯片，并通过打印创建可转换为幻灯片PDF的网页。

Marpit旨在输出幻灯片所需的最小资源。您可以使用这些基本资源创建一个逻辑简单的幻灯片，但我们主要希望将输出与其他工具和应用程序集成。

实际上，这个框架是为了作为Marp生态系统中核心转换器的基础而创建的。

Marpit的Markdown语法专注于与常见的Markdown文档兼容。这意味着即使您在通用的Markdown编辑器中打开Marpit Markdown，呈现的结果仍然会保持美观。

<br>

===编写幻灯片===
Marpit通过水平分隔符（例如---）将幻灯片页面分割开来。非常简单。

 # Slide 1
 
 foo 
 
 --- 
 
 # Slide 2
 
 bar


<br>

===指令===
Marpit Markdown使用称为“指令”的扩展语法，以支持编写令人惊叹的幻灯片。它可以控制幻灯片主题、页码、页眉、页脚、样式等等。

<br>


====用法====
<div class="layui-btn layui-bg-gray layui-btn-primary layui-border layui-btn-sm">[[Marp指令用法]]</div>

<br>


====指令的类型====
<div class="layui-btn layui-bg-gray layui-btn-primary layui-border layui-btn-sm">[[Marp指令的类型]]</div>

<br>

====全局指令====
<div class="layui-btn layui-bg-gray layui-btn-primary layui-border layui-btn-sm">[[Marp全局指令]]</div>

<br>

====本地指令====
<div class="layui-btn layui-bg-gray layui-btn-primary layui-border layui-btn-sm">[[Marp本地指令]]</div>

<br>

===图片语法===
Marpit扩展了Markdown的图片语法![](image.jpg)，以帮助创建漂亮的幻灯片。

{| class="wikitable"
|-
! 功能	
! 内联图片	
! 幻灯片背景	
! 高级背景
|-
| 关键词调整大小	
| 仅自动	
| ✅	
| ✅
|-
| 百分比调整大小	
| x	
| ✅	
| ✅
|-
| 长度调整大小	
| ✅	
| ✅	
| ✅
|-
| 图像滤镜	
| ✅	
| x	
| ✅
|-
| 多个背景	
| -	
| x	
| ✅
|-
| 分割背景	
| -	
| x	
| ✅
|}


扩展功能可以通过在图像的替代文本中包含相应的关键词来启用。


<br>

====调整图片大小====
您可以使用宽度和高度关键词选项来调整图像的大小。

<pre>
 ![width:200px](image.jpg) <!-- 将宽度设置为200像素 -->
 ![height:30cm](image.jpg) <!-- 将高度设置为300像素 -->
 ![width:200px height:30cm](image.jpg) <!-- 同时设置长度 -->

</pre>

支持简写选项w和h。通常使用这些选项很有用。

<pre>
 ![w:32 h:32](image.jpg) <!-- 将大小设置为32x32像素 -->

</pre>
内联图片只允许使用auto关键词和CSS中定义的长度单位。

与视口大小相关的几个单位（例如vw、vh、vmin、vmax）不能使用，以确保结果的不变性。

<br>


====图像滤镜====
您可以通过Markdown图像语法将CSS滤镜应用于图像。在图像的替代文本中包含<filter-name>(:<param>(,<param>...))。

滤镜可以用于内联图像和高级背景。

{| class="wikitable"
|-
! Markdown	
! 带参数
|-
| ![blur]()	
| ![blur:10px]()
|-
| ![brightness]()	
| ![brightness:1.5]()
|-
| ![contrast]()	
| ![contrast:200%]()
|-
| ![drop-shadow]()	
| ![drop-shadow:0,5px,10px,rgba(0,0,0,.4)]()
|-
| ![grayscale]()	
| ![grayscale:1]()
|-
| ![hue-rotate]()	
| ![hue-rotate:180deg]()
|-
| ![invert]()	
| ![invert:100%]()
|-
| ![opacity]()	
| ![opacity:.5]()
|-
| ![saturate]()	
| ![saturate:2.0]()
|-
| ![sepia]()	
| ![sepia:1.0]()
|}


当您省略参数时，Marpit将使用上述默认参数。

自然地，可以对图像应用多个滤镜。

 ![brightness:.8 sepia:50%](https://example.com/image.jpg)


<br>

====幻灯片背景====
我们通过Markdown提供了一种背景图像语法来指定幻灯片的背景。只需要在替代文本中包含bg关键词即可。

 ![bg](https://example.com/background.jpg)


当在幻灯片中定义了两个或多个背景图像时，Marpit仅显示最后定义的图像。如果您想显示多个图像，请尝试启用内联SVG幻灯片的高级背景。


<br>

=====背景大小=====
您可以通过关键词调整背景图像的大小。关键词值基本上遵循background-size样式。

 ![bg contain](https://example.com/background.jpg)


{| class="wikitable"
|-
! 关键词	
! 描述	
! 示例
|-
| cover	
| 将图像缩放以填充幻灯片。（默认值）	
| ![bg cover](image.jpg)
|-
| contain	
| 将图像缩放以适应幻灯片。	
| ![bg contain](image.jpg)
|-
| fit	
| 等同于contain，与Deckset兼容。	
| ![bg fit](image.jpg)
|-
| auto	
| 不缩放图像，使用原始大小。	
| ![bg auto](image.jpg)
|-
| x%	
| 以百分比值指定缩放因子。	
| ![bg 150%](image.jpg)
|}


您还可以继续使用宽度（w）和高度（h）选项关键词，通过长度指定大小。


<br>

====高级背景====
高级背景支持多个背景、分割背景和背景图像的滤镜。


<br>

=====多个背景=====
 ![bg](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
 ![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
 ![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)


这些图像将在水平行中排列。


<br>

======方向关键词======
您可以使用垂直方向关键词将对齐方向从水平改为垂直。

 ![bg vertical](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
 ![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
 ![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)



<br>

=====分割背景=====
使用bg关键词的left或right关键词在指定的一侧留出背景的空间。它占幻灯片大小的一半，幻灯片内容的空间也会收缩。

 ![bg left](https://picsum.photos/720?image=29)
 
 # 分割背景
 
 幻灯片内容的空间将收缩到右侧。



多个背景将在指定的背景侧上正常工作。

 ![bg right](https://picsum.photos/720?image=3)
 ![bg](https://picsum.photos/720?image=20)
 
 # 分割 + 多个背景
 
 幻灯片内容的空间将收缩到左侧。


当在同一幻灯片中使用多个背景时，Marpit在使用左右关键词混合时会使用最后定义的关键词。


<br>

======分割大小======
Marpit可以通过百分比（如left:33%）为背景指定分割大小。

 ![bg left:33%](https://picsum.photos/720?image=27)
 
 # 指定大小的分割背景

<br>

===表情符号支持===
Emoji简码（如 :smile:）和Unicode表情符号 😄 将会转换为由twemoji提供的SVG矢量图像 😄。这可以以高分辨率呈现表情符号。