Markdown

プレゼンテーションの内容は、Markdown を使用して記述する方が、多くの場合便利で簡単です。Markdown スライドを作成するには、<section> 要素にdata-markdown 属性を追加し、その内容を<textarea data-template>で囲みます（下記の例を参照）。

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

インデント（タブとスペースの混在を避ける）と改行（連続した改行を避ける）に注意してください。

Markdown プラグイン

この機能は、組み込みの Markdown プラグインによって実現されており、そのプラグインはすべての構文解析にmarkedを使用しています。Markdown プラグインは、デフォルトのプレゼンテーション例に含まれています。新しいプレゼンテーションに手動で追加する場合は、以下の手順に従ってください。

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

外部 Markdown

コンテンツを別ファイルとして記述し、reveal.js で実行時に読み込むことができます。外部ファイルでスライドがどのように区切られるかを決定する区切り記号引数に注意してください。data-separator 属性は、水平スライドの正規表現を定義します（デフォルトは^\r?\n---\r?\n$、改行で区切られた水平線）。data-separator-verticalは垂直スライドを定義します（デフォルトでは無効）。data-separator-notes属性は、現在のスライドのスピーカーノートの開始を指定する正規表現です（デフォルトはnotes?:なので、「note:」と「notes:」の両方に一致します）。data-charset属性はオプションで、外部ファイルを読み込む際に使用する文字セットを指定します。

ローカルで使用する場合、この機能は reveal.js がローカルWebサーバーから実行される必要があります。次の例は、使用可能なすべてのオプションをカスタマイズしています。

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

要素属性

Markdown 要素に属性を追加するための特別な構文（HTML コメントを使用）が用意されています。これは、フラグメントなど、様々な用途に役立ちます。

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

スライド属性

Markdown から生成されたスライドの<section>要素に属性を追加するための特別な構文（HTML コメントを使用）が用意されています。

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

構文ハイライト

reveal.js には強力な構文ハイライト機能が組み込まれています。下記のブラケット構文を使用すると、個々の行をハイライトし、複数の個別のハイライトをステップバイステップで確認することもできます。行のハイライトの詳細はこちら。

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

行番号オフセット

行番号オフセットを追加するには、ハイライトの先頭に数字とコロンを追加します。

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

marked の設定

Markdown の解析には marked を使用しています。marked のレンダリングをカスタマイズするには、Reveal の設定時にオプションを渡します。

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