プログラミングなどに関する、ひらう子のブログです

はてなブログ内でCodeMirrorのシンタックスハイライトを使う

前回までCodeMirrorで独自言語を扱うにあたっての使用方法を書いていましたが、実際にこのブログで、コードにハイライトを行ってみようと思います。


はてなブログでは、Wordpressなどと違って、テンプレートのHTMLを自由に変更することは出来ないようです。ですので、CodeMirrorの【codemirror.js】や【codemirror.css】へのリンクタグは、『デザイン設定』からヘッダ下パーツのHTMLを編集して埋め込むことにします。
そして、自分で定義した言語モードのスクリプトも、minifyしてヘッダに仕込みましょう。<script>タグを使って直接書き込むのが良いと思います。

次に、同じようにフッタのHTMLを編集して、CodeMirror.colorizeを起動しましょう。

<script>setTimeout(function(){CodeMirror.colorize(document.querySelectorAll('pre[data-lang="htmlsea"]'));},20);</script>

起動の為のコードはsetTimeoutで動作を20ミリ秒遅らせています。これは必ず必要という事はないのですが、一応フッタよりも下でコードが表示される場合(基本的にはありえないと思いますが)にも動作するようにという意味合いと、それとはてなブログが載せる広告のスクリプトの動作を待って動作させる為です。後者に関してはおまじない程度の意味合いですが…。

さて、デザイン設定に仕込みを入れたら、あとははてな記法でその言語ののコードを書きましょう。
コードを書く際には他の言語と同様、モード名がhtmlseaなら、「>|htmlsea|」「||<」で囲めばそれでOKです。

そうして表示されるのが、以下のコードです。モダンブラウザでJavascriptが有効になっていれば、ハイライトされて表示されると思います。
はてなブログでコード記法を行うと、preタグで囲まれて描写されます。はてなブログにとって未知の言語であれば、指定した言語名をdata-langに入れて表示することになっているようです。丁度、Codemirror.colorize()にとって扱いやすい形式になっているのです。

* $html > head > title |○○のページ
* $html > body > #wrapper
こんにちは!

↑ひとまずさくっとHTMLSeaを定義したスクリプトを使っています。完璧ではないものの、ハイライトなしで表示されるよりはかなり読みやすい表示になっているはずです。(ヘッダに仕込んだスクリプトだけに、この記事を書いた時点よりも後のバージョンのスクリプトでハイライトが行われている可能性があります)

ちなみに、フッタに仕込んだスクリプトでは、colorize関数には引数で、data-langがhtmlseaのエレメント群を取得して、渡しています。はてな記法のコード記法では、丁度data-langの設定された<pre>が表示されます。ですので、ここで引数なし起動を行うと、他の言語で書いたコード記法が巻き添えを食らうことになるのです…。


このような形で、自分でCodeMirrorで定義した言語モードを、はてなブログ内で使って自動ハイライトを行うことが出来ました。

注意点としては、はてなブログの無料版では、スマホ版表示の際には自由編集ヘッダが表示されません。ですので、ここにスクリプトを仕込んでも動かないということになります。これに関する対処としては、はてなブログスマホ版表示をしない設定を行うか、もしくは、多重起動対策をした上で記事全てにスクリプトを仕込むなどの方法が考えられます。

もう一つ注意しなければいけないのは、はてなブログにおけるはてな記法でのコード表記ですが、今後も確実に<pre data-lang="言語">という形式で提供されるかは不明だということです。ですので、仕様変更にはある程度目を光らせておく必要が出てきます。