Markdown

通常情况下，使用 Markdown 编写演示文稿内容更加方便。若要创建 Markdown 幻灯片，请将 data-markdown 属性添加到 <section> 元素，并将内容包装在 <textarea data-template> 中，如以下示例所示。

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](https://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

请注意，这会受到缩进（避免混用制表符和空格）和换行符（避免连续换行）的影响。

Markdown 插件

此功能由内置的 Markdown 插件提供支持，该插件又对所有的解析使用 marked。Markdown 插件包含在我们的默认演示文稿示例中。如果您想将其手动添加到新的展示文中，这里有操作方法

<script src="plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMarkdown],
  });
</script>

外部链接 Markdown

你可以将你的内容编写为一个单独文件，让 Reveal.js 在运行时加载它。请注意，分隔符参数决定了外部文件中幻灯片的划分方式：data-separator 属性定义了横向幻灯片的正则表达式（默认为 ^\r?\n---\r?\n$，换行符为横向规则界限），而 data-separator-vertical 定义了纵向幻灯片（默认情况下禁用）。data-separator-notes 属性是一个正则表达式，用于指定当前幻灯片的演讲者备注的开头（默认为 notes?:，因此它将匹配“note:”和“notes:”）。data-charset 属性是可选的，它指定了在加载外部文件时使用哪种字符集。

当在本地使用时，此功能要求 Reveal.js 从本地 Web 服务器运行。以下示例自定义了所有可用的选项

<section
  data-markdown="example.md"
  data-separator="^\n\n\n"
  data-separator-vertical="^\n\n"
  data-separator-notes="^Note:"
  data-charset="iso-8859-15"
>
  <!--
        Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
        For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
    -->
</section>

元素属性

可以使用特殊语法（通过 HTML 注释）为 Markdown 元素添加属性。这对于片段非常有用。

<section data-markdown>
  <script type="text/template">
    - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
    - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  </script>
</section>

幻灯片属性

可以使用特殊语法（通过 HTML 注释）为 Markdown 生成的幻灯片 <section> 元素添加属性。

<section data-markdown>
  <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
      Markdown content
  </script>
</section>

语法高亮

Reveal.js 内置了强大的语法高亮功能。使用下面显示的括号语法，你可以高亮单个行，甚至逐步浏览多个单独的高亮项。了解更多关于行高亮的信息。

<section data-markdown>
  <textarea data-template>
    ```js [1-2|3|4]
    let a = 1;
    let b = 2;
    let c = x => 1 + 2 + x;
    c(3);
    ```
  </textarea>
</section>

行号偏移

你可以在高亮的开头添加一个数字和冒号，添加行号偏移。

<section data-markdown>
  <textarea data-template>
    ```js [712: 1-2|3|4]
    let a = 1;
    let b = 2;
    let c = x => 1 + 2 + x;
    c(3);
    ```
  </textarea>
</section>

配置 marked

我们使用 marked 来解析 Markdown。要在 配置 Reveal 时自定义 marked 的呈现，你可以传入选项

Reveal.initialize({
  // Options which are passed into marked
  // See https://marked.js.org/using_advanced#options
  markdown: {
    smartypants: true,
  },
});