更新日志

演示代码

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

下面是一个将按语法高亮的 clojure 代码示例。当 data-trim 属性存在时，<code> 中间的空白将自动移除。

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

HTML 将被自动转义。若要避免这种情况，可将 `data-noescape` 添加到 `<code>` 元素。

确保文档中包含了语法高亮主题。我们默认包含 Monokai 主题，该主题与 reveal.js 代码库一起分发，位于plugin/highlight/monokai.css。可以在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>

行号和高亮

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

<pre><code data-line-numbers="3,8-10">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</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

如果你想展示较长代码集中的一段摘录，则可以偏移行号。在下面的示例中，我们设置了data-ln-start-from="7"，以便行号从 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>

逐步高亮

您可以在同一代码块中逐步浏览多个代码高亮。使用|字符分隔每个高亮步骤。例如，data-line-numbers="1|2-3|4,6-10"将产生三个步骤。它将从高亮第 1 行开始，下一步是第 2-3 行，最后是第 4 行和第 6-10 行。

<pre><code data-line-numbers="3-5|8-10|13-15">
<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>
</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>

HTML 实体 4.1.0

添加到<code>块内的内容会被网络浏览器解析为 HTML。如果你的代码中包含 HTML 字符（<>），则需要转义它们（$lt; $gt;）。

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

<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

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

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

手动高亮

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

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

更新日志 arrow-right

HTML 将被自动转义。若要避免这种情况，可将 data-noescape 添加到 <code> 元素。