コードのプレゼンテーション

reveal.js には、highlight.js によって提供される構文強調表示されたコードのプレゼンテーションを目的とした強力な機能セットが含まれています。この機能は highlight プラグインにあり、デフォルトのプレゼンテーションテンプレートに含まれています。

以下は、構文が強調表示される Clojure コードの例です。data-trim 属性が存在する場合、<code> 内の周囲の空白は自動的に削除されます。

HTML はデフォルトでエスケープされます。これを回避するには、<code> 要素に data-noescape を追加します。

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

テーマ

ドキュメントに構文強調表示のテーマが含まれていることを確認してください。デフォルトでは 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" は 3 つのステップを作成します。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> ブロック内に追加されたコンテンツは、Web ブラウザによって 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 */);
});