2015年9月4日金曜日

highlight.jsを利用してBloggerでLaTeXのソースコードに色付けを行う設定

はてなブログやwordpressではLaTeXのソースに色付けする機能が標準で備わっていて、日頃から羨ましく感じていました。
ソースコードの色付けを行う方法としては、syntaxhighlighterを使うのが有名なようで、検索で引っかかる情報が多かったです。しかしsyntaxhighlighterではLaTeXが公式にサポートされていません。こちらで紹介されているように、非公式には存在しているみたいです。

今回は、LaTeXのソースの色付けが公式にサポートされているhighlight.jsの導入を試しました。kakurasanの備忘録さんの「HTML内のコード色付き表示highlight.jsのBloggerへの設置とカスタマイズ」という記事を参考にしました。
公式サイトに行き、「Get version 8.7」のボタンをクリックすると次の 画面になります。現在のバージョンは8.7です。
最初の説明によると、よく使われる22の言語についてはCDNにホストされているので自前で導入しなくとも使えるそうで、この部分のコードをテンプレートに記述することだけで良いのですが、TeXはこの中に含まれていません。下にスクロールしてみると利用可能な言語の一覧があります。
Common部分がCDNにホストされている言語で、それ以外の言語についてはチェックを入れてパッケージをダウンロードし、自分で設定を行う必要があります。

下の方にTeXも見つかりました。ここではScilabとTeXにチェッックを入れています。必要な言語を選んで「Download」ボタンをクリックするとhighlight.zipというファイルがダウンロードされるので解凍します。今回実質的に用いるのは、解凍したフォルダ内にあるhightlight.pack.jsというファイルだけです。これがソースコードに色付けするJavaScriptライブラリです。このファイルの内容をテンプレートに貼り付ける方法もあるようなのですが、ここではGoogle Driveにファイルをアップロードして設置する方法を取りました。

私の場合はhighlight.zipを解凍してできたhighlightというフォルダそのものをGoogle Driveにアップロードしました。以下はGoogle Driveでフォルダの中身を開いた画像です。
ここでhighlight.pack.jsを選択し、右上の左から2番目の人型アイコンから共有の詳細設定でアクセス権限を「ウェブ上で一般公開」に設定します。この画像は共有設定済みのものです。
同じアイコンをクリックするとファイルのリンクが表示されます。下の画像はその一部です。
ここで「 https://drive.google.com/file/d/…/view?usp=sharing」のドット部分にある文字列をコピーします。このファイルの実体は「https://googledrive.com/host/…」にあります。

さて、このスクリプトファイルを参照する設定をブログのテンプレートに書き込む設定をしましょう。

ブログの編集画面から、テンプレートを選択し、「HTMLの編集」ボタンをクリックします。そしてbodyで囲まれた部分の最後の方に次のように記述します。
記入した内容は
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/monokai.min.css' rel='stylesheet'/>
<script src='https://googledrive.com/host/「上でコピーした文字列」' type='text/javascript'/>
<script>hljs.initHighlightingOnLoad();</script>
です。最初の1行は色付けのスタイルファイルの設定で、こちらも通常は自前のファイルを使って設定をするのですが、どうにもうまくいかなかったためCDNに置いてあるcssファイルを読み込むように設定しました。ここではmonokaiというスタイルを選択しています。
他のスタイルを試したい場合は、公式ページのlive demoの部分から各言語での色付けの様子を確認することができます。

以上でテンプレートの設定は完了です。
<pre><code>...</code></pre>
で囲んだ部分が色付けされます。言語は自動判定しているので、判定がうまくいっていない場合や言語を明示したい場合は
<pre><code class="tex">...</code></pre>
のように記述しておくと良いようです。