Markdown 插件

概述

Markdown 插件集成了 marked Markdown 解析器，用于将 Markdown 内容转换为 reveal.js 幻灯片。它支持水平和垂直幻灯片分隔、演讲者备注、自定义属性和增强的代码块格式。

来源：plugin/markdown/plugin.js1-30 plugin/markdown/plugin.js418-490

插件架构

Markdown 插件遵循 reveal.js 插件系统架构。它在初始化期间注册到 reveal.js，并提供多个用于处理 Markdown 内容的关键函数。

来源：plugin/markdown/plugin.js418-480 plugin/markdown/plugin.js29-33

安装与基本用法

插件注册

在初始化时将 Markdown 插件注册到 reveal.js

来源：test/test-markdown.html317-325

使用内联 Markdown

在 HTML 文件中直接包含 Markdown

来源：test/test-markdown.html19-35 plugin/markdown/plugin.js203-258

使用外部 Markdown 文件

从外部文件加载 Markdown

来源：test/test-markdown.html37-41 plugin/markdown/plugin.js261-302

幻灯片分隔

Markdown 插件会解析你的内容，并根据分隔符模式创建单独的幻灯片。

水平幻灯片

水平幻灯片使用水平分隔符模式进行分隔，该模式默认为 \r?\n---\r?\n（由换行符包围的三个破折号）。

垂直幻灯片

可以使用 `data-separator-vertical` 属性或在 reveal.js 配置中设置的垂直分隔符模式来创建垂直幻灯片。

配置

可以通过 HTML 属性或全局配置自定义幻灯片分隔符

或通过全局配置

来源：plugin/markdown/plugin.js9-13 plugin/markdown/plugin.js135-200

演讲者备注

您可以使用备注分隔符在幻灯片中添加演讲者备注。

备注分隔符可以自定义

来源：plugin/markdown/plugin.js11-12 plugin/markdown/plugin.js113-128

幻灯片和元素属性

幻灯片属性

您可以通过 HTML 注释为幻灯片添加自定义属性

来源：test/test-markdown.html82-108 plugin/markdown/plugin.js304-336

元素属性

您也可以为幻灯片中的特定元素添加属性

属性分隔符可以自定义

来源：test/test-markdown.html151-200 plugin/markdown/plugin.js342-375

代码块功能

Markdown 插件通过语法高亮和行号功能增强了代码块。

基本代码块


### Line Numbers and Highlighting

Add line numbers and highlighting specific lines:

```markdown
```javascript [1,3-5]
function example() {
    let greeting = "Hello";
    let subject = "world";
    console.log(greeting, subject);
    return true;
}


### Line Number Offset

Specify a starting line number:

```markdown
```javascript [25: 1,3-5]
function example() {
    let greeting = "Hello";
    let subject = "world";
    console.log(greeting, subject);
    return true;
}


The first line will be numbered as 25, and highlights will be adjusted accordingly.

Sources: <FileRef file-url="https://github.com/hakimel/reveal.js/blob/dfc5690c/plugin/markdown/plugin.js#L434-L466" min=434 max=466 file-path="plugin/markdown/plugin.js">Hii</FileRef> <FileRef file-url="https://github.com/hakimel/reveal.js/blob/dfc5690c/test/test-markdown.html#L263-L314" min=263 max=314 file-path="test/test-markdown.html">Hii</FileRef>

## Configuration Options

The Markdown plugin can be configured through the reveal.js initialization options:

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| separator | String | `\r?\n---\r?\n` | Horizontal slide separator pattern |
| verticalSeparator | String | `null` | Vertical slide separator pattern |
| notesSeparator | String | `^s*notes?:` | Speaker notes separator pattern |
| renderer | Object | `null` | Custom marked renderer |
| animateLists | Boolean | `false` | Automatically add fragments to list items |

Example configuration:

```javascript
Reveal.initialize({
    markdown: {
        separator: '^\n\n\n',
        verticalSeparator: '^\n\n',
        notesSeparator: '^Note:',
        smartypants: true,
        animateLists: true
    }
});

该插件还将选项传递给 marked 库，从而可以自定义 Markdown 解析。

来源：plugin/markdown/plugin.js97-107 plugin/markdown/plugin.js429-476 test/test-markdown.html394-413

插件 API

Markdown 插件在初始化后公开了几个可以访问的方法

方法	描述
`processSlides(element)`	处理给定元素内的所有 Markdown 幻灯片
`convertSlides()`	将演示文稿中的所有 Markdown 幻灯片转换为 HTML
`slidify(markdown, options)`	根据分隔符解析 Markdown 字符串到幻灯片
`marked`	直接访问 marked 库实例

使用示例

来源：plugin/markdown/plugin.js481-486

处理流程

下图说明了 Markdown 插件如何处理内容

来源：plugin/markdown/plugin.js29-410

浏览器兼容性

Markdown 插件使用所有现代浏览器都支持的标准 API。它依赖于

用于加载外部文件的 XMLHttpRequest
用于修改演示文稿的 DOM 操作
用于解析和处理内容的正则表达式

对于较旧的浏览器，请确保使用插件的 UMD 版本（markdown.js），而不是 ES 模块版本（markdown.esm.js）。

来源：plugin/markdown/markdown.js1 plugin/markdown/markdown.esm.js1