reveal.jsでシンタックスハイライトできない問題を解決(markdownに埋め込み)

この記事の目的

reveal.jsでsyntax highlightができなかったため, 有効にする.

上記記事では, markdownファイル内でのコード埋め込み方法について記述されていなかったため, ここを補足したい.

要点 htmlファイルに以下の1行を追加すれば動く.

<body>
<!-- この1行を追加 -->
<pre style="display:none"><code></code></pre> 
...
</body>

以下, 備忘録.

markdown記法でプレゼンを作ることができるツール.
ブラウザ上で動作し, pptよりちょっとかっこよく見せれる.

html,cssで見た目を拡張可能である.

導入からindex.htmlの書き方などは下記のサイトを参考にした.
reveal.js, markdown,githubでスライドを作成する
※ページ中ほど, data-verticalではなくdata-separator-verticalであることに注意.

reveal.jsではmdファイルと同じくコードを埋め込むことができ, syntax highlightも可能である...
```ruby
ここにコードを書く
```

はずなのだが上手く動かないorz

一部抜粋

<section>
<pre><code class="ruby">
ここにコード
</code></pre>
</section>

がhtml fileの中に1つでも含まれていれば動作するよう.

そこで, これをそのままhtmlファイルに入力した.
しかし, コード表示領域が表示されてしまう問題が起きた.

じゃ, 非表示にしちゃえばいいじゃん, ということで<pre>タグにオプションを追加.

<!-- pre>タグ内を非表示 -->
<pre style="display:none"><code class="ruby"></code></pre>

あと, いじっていたらclass="ruby"って部分も不要なことに気付いた.

<!-- class=""を削除 -->
<pre style="display:none"><code></code></pre>

これが完成形.