演示代码

¥Presenting Code

reveal.js 包含一组强大的功能，旨在呈现语法高亮的代码 - 由 highlight.js 提供支持。此功能位于高亮插件中，并包含在我们的默认演示文稿样板中。

¥reveal.js includes a powerful set of features aimed at presenting syntax highlighted code — powered by highlight.js. This functionality lives in the highlight plugin and is included in our default presentation boilerplate.

以下是使用 Clojure 代码的示例，将语法高亮显示。当存在 data-trim 属性时，<code> 内周围的空格将被自动删除。

¥Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present, surrounding whitespace within the <code> is automatically removed.

默认情况下，HTML 将被转义。为了避免这种情况，请将 data-noescape 添加到 <code> 元素。

¥HTML will be escaped by default. To avoid this, add data-noescape to the <code> element.

<section>
  <pre><code data-trim data-noescape>
(def lazy-fib
  (concat
   [0 1]
   ((fn rfib [a b]
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
  </code></pre>
</section>

      (def lazy-fib
        (concat
         [0 1]
         ((fn rfib [a b]
              (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
      

主题设置

¥Theming

确保你的文档中包含语法高亮主题。我们默认包含 Monokai，它与 reveal.js 代码库一起发布在 plugin/highlight/monokai.css。完整主题列表可在 https://highlightjs.org/demo 中找到。

¥Make sure that a syntax highlight theme is included in your document. We include Monokai by default, which is distributed with the reveal.js repo at plugin/highlight/monokai.css. A full list of available themes can be found at https://highlightjs.org/demo.

<link rel="stylesheet" href="plugin/highlight/monokai.css" />
<script src="plugin/highlight/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealHighlight],
  });
</script>

行号和高亮

¥Line Numbers & Highlights

你可以通过在 <code> 标签中添加 data-line-numbers 来启用行号。如果你想高亮显示特定行，可以使用相同的属性提供以逗号分隔的行号列表。例如，在下面的示例中，第 3 行和第 8-10 行高亮：

¥You can enable line numbers by adding data-line-numbers to your <code> tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 3 and 8-10 are highlighted:

<pre><code data-line-numbers="3,8-10">


<table>
  <tr>
    <td>苹果</td>
    <td>$1</td> 
    <td>7</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>$2</td> 
    <td>18</td>
  </tr>
</table>


</code></pre>

<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>

行号偏移 4.2.0

¥Line Number Offset 4.2.0

如果你想展示较长代码片段，可以偏移行号。在下面的示例中，我们设置 data-ln-start-from="7" 以使行号从 7 开始。

¥You can offset the line number if you want to showcase a excerpt of a longer set of code. In the example below, we set data-ln-start-from="7" to make the line numbers start from 7.

<pre><code data-line-numbers data-ln-start-from="7">
<tr>
  <td>Oranges</td>
  <td>$2</td>
  <td>18</td>
</tr>
</code></pre>

<tr>
  <td>Oranges</td>
  <td>$2</td>
  <td>18</td>
</tr>

分步高亮

¥Step-by-step Highlights

你可以在同一代码块上单步执行多个代码高亮显示。使用 | 字符分隔每个高亮步骤。例如，data-line-numbers="1|2-3|4,6-10" 将产生三个步骤。它将首先高亮显示第 1 行，下一步是第 2-3 行，最后是第 4 行和第 6 到第 10 行。

¥You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the | character. For example data-line-numbers="1|2-3|4,6-10" will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10.

<pre><code data-line-numbers="3-5|8-10|13-15">


<table>
  <tr>
    <td>苹果</td>
    <td>$1</td> 
    <td>7</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>$2</td> 
    <td>18</td>
  </tr> 
  <tr>
    <td>猕猴桃</td>
    <td>$3</td> 
    <td>1</td>
  </tr>
</table>


</code></pre>

<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Kiwi</td>
    <td>$3</td>
    <td>1</td>
  </tr>
</table>

语言选择

¥Language selection

默认情况下，highlight.js 会尝试自动检测代码片段中使用的语言。但是，可以通过添加 language-XXX 属性来覆盖此属性。支持语言的完整列表可在 文档 上找到。

¥By default, highlight.js tries to automatically detect which language is used in the code snippet. It is however possible to overwrite this by adding a language-XXX attribute. The full list of supported languages is available on their documentation.

<pre><code data-trim class="language-python">
>>> import antigravity
>>> print(b"\x01\x02\x03")
>>> a = 2
</code></pre>

>>> import antigravity
>>> print(b"\x01\x02\x03")
>>> a = 2

HTML 实体 4.1.0

¥HTML Entities 4.1.0

在 <code> 块内添加的内容将被 Web 浏览器解析为 HTML。如果你的代码中包含 HTML 字符 (<>)，则需要对其进行转义 ($lt;$gt;)。

¥Content added inside of a <code> block is parsed as HTML by the web browser. If you have HTML characters (<>) in your code you will need to escape them ($lt; $gt;).

为了避免手动转义这些字符，你可以将代码封装在 <script type="text/template"> 中，我们会为你处理。

¥To avoid having to escape these characters manually, you can wrap your code in <script type="text/template"> and we'll handle it for you.

<pre><code><script type="text/template">
sealed class Either<out A, out B> {
  data class Left<out A>(val a: A) : Either<A, Nothing>()
  data class Right<out B>(val b: B) : Either<Nothing, B>()
}
</script></code></pre>

highlight.js API 和 beforeHighlight 4.2.0

¥The highlight.js API & beforeHighlight 4.2.0

如果你想在代码高亮之前与 highlight.js 进行交互，可以使用 beforeHighlight 回调。例如，如果你想通过 highlight.js API 注册一种新语言，这将非常有用。

¥If you want to interact with highlight.js before your code is highlighted you can use the beforeHighlight callback. For example, this can be useful if you want to register a new language via the highlight.js API.

Reveal.initialize({
  highlight: {
    beforeHighlight: (hljs) => hljs.registerLanguage(/*...*/),
  },
  plugins: [RevealHighlight],
});

手动高亮

¥Manual Highlighting

当 reveal.js 启动时，所有代码块都会自动语法高亮。如果你想禁用此行为并自行触发高亮显示，可以将 highlightOnLoad 标志设置为 false。

¥All of your code blocks are automatically syntax highlighted when reveal.js starts. If you want to disable this behavior and trigger highlighting on your own you can set the highlightOnLoad flag to false.

Reveal.initialize({
  highlight: {
    highlightOnLoad: false,
  },
  plugins: [RevealHighlight],
}).then(() => {
  const highlight = Reveal.getPlugin('highlight');
  highlight.highlightBlock(/* code block element to highlight */);
});