Markdown

使用 Markdown 编写演示文稿内容是可行的，而且通常更方便。要创建 Markdown 幻灯片，请将 data-markdown 属性添加到你的 <section> 元素，并将内容封装在 <textarea data-template> 中，如下例所示。

¥It's possible and often times more convenient to write presentation content using Markdown. To create a Markdown slide, add the data-markdown attribute to your <section> element and wrap the contents in a <textarea data-template> like the example below.

<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>

请注意，此功能对缩进（避免混合使用制表符和空格）和换行符（避免连续换行）敏感。

¥Note that this is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

Markdown 插件

¥Markdown Plugin

此功能由内置 Markdown 插件提供支持，该插件使用 marked 进行所有解析。Markdown 插件包含在我们的默认演示文稿示例中。如果你想手动将其添加到新的演示文稿中，请按以下步骤操作：

¥This functionality is powered by the built-in Markdown plugin which in turn uses marked for all parsing. The Markdown plugin is included in our default presentation examples. If you want to manually add it to a new presentation here's how:

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

外部 Markdown

¥External Markdown

你可以将内容编写为单独的文件，并让 reveal.js 在运行时加载它。请注意，分隔符参数决定了幻灯片在外部文件中的分隔方式：data-separator 属性定义了水平幻灯片的正则表达式（默认为 ^\r?\n---\r?\n$，即换行符边界的水平规则），data-separator-vertical 定义了垂直幻灯片（默认禁用）。data-separator-notes 属性是一个正则表达式，用于指定当前幻灯片演讲者注释的开头（默认为 notes?:，因此它将匹配 "注意：" 和 "备注："）。data-charset 属性是可选的，用于指定加载外部文件时要使用的字符集。

¥You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\r?\n---\r?\n$, a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to notes?:, so it will match both "note:" and "notes:"). The data-charset attribute is optional and specifies which charset to use when loading the external file.

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

¥When used locally, this feature requires that reveal.js runs from a local web server. The following example customizes all available options:

<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>

元素属性

¥Element Attributes

可以使用特殊语法（通过 HTML 注释）向 Markdown 元素添加属性。此功能对片段等非常有用。

¥Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, among other things.

<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>

幻灯片属性

¥Slide Attributes

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

¥Special syntax (through HTML comments) is available for adding attributes to the slide <section> elements generated by your Markdown.

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

语法高亮

¥Syntax Highlighting

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

¥Powerful syntax highlighting features are built into reveal.js. Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. Learn more about line highlights.

<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>

行号偏移

¥Line Number Offset

你可以在高亮部分的开头添加数字和冒号来添加行号偏移。

¥You can add a line number offset by adding a number and a colon at the beginning of your highlights.

<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>

配置标记

¥Configuring marked

我们使用 marked 解析 Markdown。要自定义 marked 的渲染，你可以在配置 Reveal 时传入以下选项：

¥We use marked to parse Markdown. To customize marked's rendering, you can pass in options when configuring Reveal:

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