blogger に highlight.js を組み込む

highlight.js ソースコードを整形して表示する Javascript。 ほかに SyntaxHighlighter とかが有名。

設定は Blogger のテンプレートのヘッダのところに下の3行を追加する。 Blogger のテンプレートは XML なので link のタグは > ではなく /> で閉じる必要がある。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>

使用例

<pre><code>&lt;link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css' rel='stylesheet'/&gt;
&lt;script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'&gt;&lt;/script&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
</code></pre>

Blogger の編集モードを HTML にして <pre><code>, </code></pre> でソースを囲む。 ただし <, > はそのまま処理されるので文字参照で置き換える必要があった。 HTML のソースとか記述するときは通常モードで貼り付けておいてから HTML モードに切り替えて <pre><code>, </code></pre> で囲む手順にするのが良さそう。

あとプレビューだと横スクロールバーが表示されるけど機能しない。


参考にしたページ

• http://syncer.jp/how-to-use-highlightjs
• http://www.kuribo.info/2008/06/blogger-syntax-highlighter.html
• https://highlightjs.org/usage/