2015年5月6日水曜日

Bloggerへのhighlight.jsの導入

Syntax Highlighterの選択

Bloggerでブログを始めるにあたって、プログラムのソースコードを色付けして表示する機能(syntax highlighter)を使えるようにしたいと考えた。調査した範囲では、Bloggerに組み込めそうなsyntax highlighterは以下の3つだった。

  1. highlight.js
  2. Syntax Highlighter
  3. google/code-prettify

結論から言うと、対応言語とスキンの種類の豊富さから、今回は1を選んだ。特にHaskell対応とVisual Studio風スキンが気に入った。以下は2,3に関するコメント。

  • 2は老舗で多機能のようだが、Haskellが対応言語のリストに含まれていない。また、公式hosted versionを利用したBloggerへの組み込み手順を実施してもSyntax Highlightingが動作しなかった(原因はあまり真剣に追求していないので単にどこかで間違えたのかもしれない)。Githubで次期バージョンが開発中のようなのでもう少ししたらまたのぞいてみたい。
  • 3は長期にわたって更新が停止している。Haskellにも対応しているが、skinの選択肢が少なく、その中に気に入るものがなかった。

highlight.jsをBloggerに組み込む

  1. Custom Packageの取得

    2. highlight.jsの公式hosted versionではHaskellに対応していないので、自前でなんとかする。まずダウンロードページでサポートしたい言語にチェックを入れ(不要な言語からはチェックを外し)、downloadボタンをクリックすると、所望の言語に対応したCustom Package (highlight.zip)を入手できる。

  2. Custom PackageをGithubにpush

    3. Github上に適当なリポジトリ(例: userid/highlightjs_cp)を作成し、入手したhighlight.zipの中身をそのままpushする。 

    
unzip -d highlight highlight.zip
cd highlight
git init
git add .
git commit -m 'highlight.js custom package'
git remote add origin https://github.com/userid/highlightjs_cp.git
git push origin master
  3. RawGitでGithub上のファイルのURLを取得

    4. pushしたファイルのうち、highlight.pack.jsおよびstyleディレクトリ配下の自分の好きなスキンのファイル(例: style/vs.css)へのURLをRawGitで取得する。rawgit.com経由にするかCDN経由にするかは予想されるトラフィック次第だが、書いた本人しか見ないような個人ブログならrawgit.comで十分と判断する。ここでは以下の通りURLが取得できたとする。

    https://rawgit.com/userid/highlitejs_cp/master/highlight.pack.js
https://rawgit.com/userid/highlitejs_cp/master/styles/vs.css
  4. Bloggerテンプレートへの埋め込み
    5. How to use highlight.jsの冒頭にある3行のURLを上記のもので置き換える。 
    <link rel="stylesheet" href="https://rawgit.com/userid/highlitejs_cp/master/styles/vs.css"/>
<script src="https://rawgit.com/userid/highlitejs_cp/master/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  5. BloggerのテンプレートHTML編集画面を開き、head要素の最後のあたりに上記3行を追記、保存する。

使ってみる その1(C言語)

"<"記号はエスケープが必要であることに注意する。

  • HTMLソース
    • <pre><code class="cpp">
#include &lt;stdio.h>
int main(int argc, char** argv) {
  printf("Hello, world!\n");
  return 0;
}
</code></pre>
  • 出力
    • #include <stdio.h>
int main(int argc, char** argv) {
  printf("Hello, world!\n");
  return 0;
}

使ってみる その2(Haskell)

  • HTMLソース
    • <pre><code class="haskell">
import Control.Monad
import Data.Char
main = forever $ do
  l &lt;- getLine
  putStrLn $ map toUpper l
</code></pre>
  • 出力
    • import Control.Monad
import Data.Char
main = forever $ do
  l <- getLine
  putStrLn $ map toUpper l
時刻:
ラベル: ,