ブログなどでプログラムの一部とかを載せる時によく使われている、カラフルな表示。「シンタックスハイライト」というのですが、あれを当ブログでも使ってみたいと思いまして、ちょっといろいろやってみました。
シンタックスハイライトを行なう方法というのはたくさんあるらしいのですが、その中でも動作が軽くてMovableTypeに導入しやすいものはないものか、と思ってあちこち探してみたところ、「highlight.js」というものに行き当たりました。調べてみるとなかなか評判もいいらしいので、じゃあこれを入れてみるべ、とやってみた手順を以下にご紹介します。
highlight.jsは、Webサービスのように特定のURLをヘッダに書き加えることで、インストール作業なしで利用できるというのが売りのひとつになっています。ですが、それは何だか他人様の環境に依存しているようで申し訳ないというか、もしそのサービスが重たくなったり止まったりしたらどうするのか、とかいろいろ思うところがあったので、自前の環境にインストールして使うことにしました。
手順としては、ざっくりまとめると以下のとおりです。
- highlight.js一式をダウンロードする
- ブログのルートディレクトリにhighlight.js一式をアップロードする
- HTMLヘッダーにhighlight.jsを使うためのタグを追記する
まあ、そんなに手間のかかる作業ではありません。というわけで、以下簡単に説明します。
まず、highlight.js一式を公式サイトからダウンロードしてきます。これを書いている時点ではバージョン9.0.0が公開されていますので、ポチッとボタンを押せばダウンロードできます。
ダウンロードしたzipファイルを解凍すると、highlight.js本体であるJavaScriptと、スタイルシートが入ったフォルダが出てきますので、これをブログのルートディレクトリにそのままアップロードします。他のファイルとまぜこぜになるといけないので、ルートディレクトリに「highlight」というディレクトリを作って、そこに入れておくのがいいでしょう。
あとは、このJavaScriptとスタイルシートを使うように、MovableTypeのテンプレートモジュールの「HTMLヘッダー」に以下の３行を追記します。
<link rel="stylesheet" href="<$mt:BlogURL$>highlight/styles/default.css" type="text/css" />
<script type="text/javascript" src="<$mt:BlogURL$>highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>以上、インストール作業はこれでおしまいです。簡単ですね。
で、実際に記事でシンタックスハイライトを使いたいときは、その部分を<pre><code>……</code></pre>で囲めばOKです。例えば、Perlのスクリプトなどはこんな風に表示されます。
my $path = "/home/tetsushi/twitter_bot/r_tanaka_ichiro";
my $i = 0;
my ( $min, $hour ) = ( 0, 0 );
my $status = "";
my $twit;
my $config = (YAML::Tiny->read( "$path/config.yml" ))->[0];
my @jihou_comment = @{YAML::Tiny->read( "$path/jihou.yml" )->[0]};
my $reaction = (YAML::Tiny->read( "$path/reaction.yml" ))->[0];
my $since_id = (YAML::Tiny->read( "$path/since_id.yml" ))->[0];
$since_id = $since_id->{'since_id'};けっこう、それっぽいでしょ？（笑）
ちなみに、ハイライトの部分の背景色やテキストの色などは、インストールしたスタイルシートのどれを選ぶかでいろいろ変えることができます。私は「agate.css」というのが気に入ったので、それを使うことにしました。その場合、HTMLヘッダーに追記した3行のうちでスタイルシートを定義している行の「default.css」を「agate.css」に書き換えればOKです。こちらのページでスタイルシートを試すことができますので、お好みのものを選んでみてください。
以上、簡単ですがhighlight.jsの導入手順でした。