reveal.jsでシンタックスハイライトできない問題を解決(markdownに埋め込み)
この記事の目的
reveal.jsでsyntax highlightができなかったため, 有効にする.
以下の記事を参考にさせてもらった.
reveal.jsを新しくしたらハマった(後編)
上記記事では, markdownファイル内でのコード埋め込み方法について記述されていなかったため, ここを補足したい.
要点 htmlファイルに以下の1行を追加すれば動く.
<body> <!-- この1行を追加 --> <pre style="display:none"><code></code></pre> ... </body>
以下, 備忘録.
reveal.jsについて
markdown記法でプレゼンを作ることができるツール.
ブラウザ上で動作し, pptよりちょっとかっこよく見せれる.
html,cssで見た目を拡張可能である.
導入からindex.htmlの書き方などは下記のサイトを参考にした.
reveal.js, markdown,githubでスライドを作成する
※ページ中ほど, data-vertical
ではなくdata-separator-vertical
であることに注意.
syntax highlightについて
reveal.jsではmdファイルと同じくコードを埋め込むことができ, syntax highlightも可能である...
```ruby
ここにコードを書く
```
はずなのだが上手く動かないorz
少し調べるとこのような記事を発見.
reveal.jsを新しくしたらハマった(後編)
一部抜粋
<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>
これが完成形.