在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

hakimel/reveal.js

菜单

Markdown 支持

相关源文件

本文档说明了如何在 reveal.js 演示文稿中使用 Markdown 格式。Reveal.js 包含一个强大的 Markdown 插件，允许您使用 Markdown 而不是 HTML 来编写幻灯片，从而提供更简单的创作体验，同时保持 reveal.js 的全部功能。有关创建自定义插件的信息，请参阅创建自定义插件。

概述

reveal.js 中的 Markdown 插件支持两种主要工作流程：

  1. 在 HTML 文件中直接使用 Markdown 语法编写幻灯片
  2. 将外部 Markdown 文件加载到演示文稿中

该插件处理 Markdown 内容，将其转换为 HTML 幻灯片，并支持用于幻灯片分隔、垂直幻灯片、演讲者备注和元素属性的特殊语法。

来源： plugin/markdown/plugin.js29-489 plugin/markdown/markdown.js1-7

基本用法

行内 Markdown

要在 HTML 文件中使用 Markdown，请创建一个带有 data-markdown 属性的 section 元素，并将您的 Markdown 放在一个 <script type="text/template"> 标签内

外部 Markdown 文件

要从外部文件加载 Markdown，请在 data-markdown 属性中指定文件路径

来源： plugin/markdown/plugin.js208-258 test/test-markdown.html19-41

幻灯片分隔

默认情况下，水平幻灯片通过三个换行符（\n\n\n）或模式 --- 进行分隔。垂直幻灯片通常用两个换行符（\n\n）分隔。您可以使用属性自定义这些分隔符

属性目的默认值
data-separator水平幻灯片分隔符^\r?\n---\r?\n$
data-separator-vertical垂直幻灯片分隔符null
data-separator-notes演讲者备注分隔符^notes?

使用这些分隔符的 Markdown 内容示例

来源： plugin/markdown/plugin.js97-108 plugin/markdown/plugin.js135-200 test/test-markdown.html21-33

配置

您可以在 reveal.js 初始化中配置 Markdown 插件

选项

  • smartypants：将直引号转换为弯引号、破折号转换为长破折号等。
  • renderer：提供自定义的marked.js渲染器
  • animateLists：自动为列表项添加 fragment 类

来源： plugin/markdown/plugin.js429-476 test/test-markdown.html393-407

代码块

Markdown 插件提供了增强的代码块功能

语法高亮

使用带有语言标识符的三重反引号来启用语法高亮


### Line Numbers and Highlighting

You can add line numbers and highlight specific lines using a special syntax in the code block declaration:

```markdown
```javascript [1,4-6]
// Line 1 is highlighted
function example() {
  // Lines 4-6 are highlighted
  let x = 10;
  let y = 20;
  return x + y;
}


### Line Numbering with Custom Offset

You can specify a starting line number:

```markdown
```javascript [15: 2,5-7]
// Line 2 is highlighted (but numbered as 16)
function example() {
  // Lines 5-7 are highlighted (numbered as 19-21)
  let x = 10;
  let y = 20;
  return x + y;
}


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#L246-L304" min=246 max=304 file-path="test/test-markdown.html">Hii</FileRef>

## Element and Slide Attributes

You can add attributes to elements or entire slides using HTML comments:

### Element Attributes

To add attributes to the preceding element:

```markdown
## Slide Title
<!-- .element: class="fragment fade-in" data-fragment-index="1" -->

- Item 1 <!-- .element: class="fragment" -->
- Item 2 <!-- .element: class="fragment" -->

幻灯片属性

为整个幻灯片添加属性

来源： plugin/markdown/plugin.js314-336 plugin/markdown/plugin.js342-374 test/test-markdown.html151-198

与其他插件的集成

Markdown 插件可与其他 reveal.js 插件无缝协作

  1. 语法高亮：代码块由 Highlight.js 插件自动处理
  2. 数学：LaTeX 表达式由 Math 插件渲染
  3. 备注：演讲者备注由 Notes 插件处理

插件架构

Markdown 插件遵循 reveal.js 的插件架构，与核心框架集成

来源： plugin/markdown/plugin.js418-489

高级特性

外部 Markdown 文件

从外部文件加载时，该插件支持

  • 通过 AJAX 加载 Markdown
  • 通过 data-charset 属性自定义字符集
  • 加载失败的错误处理

来源： plugin/markdown/plugin.js261-303

Markdown 中的 HTML

您可以在幻灯片中混合使用 HTML 和 Markdown。Markdown 解析器将忽略大多数 HTML 标签内的内容，允许您使用 HTML 进行更复杂的布局

示例

以下是 Markdown 插件的一些常见用法模式

带列表的基本幻灯片

代码示例幻灯片


### Two-Column Layout

```markdown
<div class="columns">
  <div class="column">
    ## Left Column
    
    - Point one
    - Point two
    - Point three
  </div>
  <div class="column">
    ## Right Column
    
    ```js
    // Code example
    const x = 10;
    const y = 20;
    ```
  </div>
</div>

结论

Markdown 插件提供了一种强大而简化的标记语言来创建 reveal.js 演示文稿。它支持 reveal.js 的所有核心功能，同时降低了幻灯片创建的复杂性。如需进一步自定义，您可以探索各种配置选项以及与其他插件的集成。

有关 reveal.js 中其他插件的信息，请参阅插件系统。

来源： plugin/markdown/plugin.js1-489 plugin/markdown/markdown.js1-7 plugin/markdown/markdown.esm.js1-2