WEB技術ブログを書くなら、コードを綺麗に表示させなければなりません。ツールを検討した結果、私は”highlight.js”に決めました。シンプルで軽量、言語もテーマもとっても豊富！な、highlight.jsを解説したいと思います！
なぜhighlight.js？プラグインは使わないの？
WPで人気のあるソースコートのハイライターといえば、SyntaxHighlighterプラグインですよね。実は最初、こっちを検討してました。きめ細かい表示だし、日本語の管理画面で細かな調整ができるし、至れり尽くせりのナイスツールだったんですが。。 もっとシンプルで軽いのがいいな、と。私には、そんなに高機能なツールでなくてもよさそうですし。まだ、今後プラグインが増えていく未来を考えると、無くても行けるプラグインは無暗に増やしたくない（^^;）というわけで、highlight.jsに鞍替えいたしました。
highlight.jsのメリット
とにかく軽量！
使用するファイルは実質jsとcss、それぞれ１ファイルのみ。しかも、必要な言語を選択してからダウンロードするので、余計なファイルを読み込む必要はありません。SyntaxHighlighterを使っているとCSSが適用されるまで結構間があいて、ハダカのコードが見えたりしますよね。highlight.jsなら大丈夫です。
豊富な言語とテーマ
2015年2月現在、ハイライトしてくれる言語は112種類、スタイルテーマは49種類もあります。多すぎる？後述しますが、とっても選びやすいUIになってますから心配いりません。
シンプルで美しい見た目
基本的には行番号やコピペボタンなどのパネルはありませんし、一行ごとに見やすく色分けもされておりません。好みがわかれるところかとは思いますが、スッキリしたデザインが好きな私にはこっちのほうがいいです。
簡単にカスタマイズできる！
構造がシンプルな分、cssのカスタマイズもしやすいかと思います。また、jQueryを使えば読み込みタイミングを変えたり、囲みタグを変更するのもらくちんです。
highlight.jsを実装しよう
それでは、実装方法を見ていきましょう。
ファイルをダウンロード
公式サイトより、「get version〇.〇」ボタンをクリック。 次に使用する言語を選択し、Downloadをクリックします。。もし将来的に使いたい言語が増えたら、戻ってきてダウンロードしなおせばOK。
必要ファイルをアップロードし、にファイルへのリンクとファンクションを記述
必要なファイルはたったの２つ。 ・highlight/highlight.pack.js ・highlight/styles/お好きなスタイルcss 使用するcssファイルは、公式サイトでデモを見ながら決めましょう。こんなかんじで、使いたい言語とスタイルをかけ合わせながら選ぶことができます。
スタイルを決めたらファイルをアップロードし、該当ページに読み込みます。 そして、その下に<script>hljs.initHighlightingOnLoad();</script>を記入します。ぶちねこどっとうぇぶの場合は、こんなかんじ。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ir_black.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>あとは、ハイライトしたいところを<pre><code>～</code></pre>で囲めばOKです！使用言語を自動で判断し、適切に色づけしてくれます。
デモをはこんな感じだよ
黒地にぱきっとした色合いが気に入ったので、IR_Blackを採用しました。
HTML
<head><title>ぶちねこどっとうぇぶ</title></head>
<body>
<p>ねこはいつでもまるくなる</p>CSS
#header{
padding: 4px 0;
background-color: #ecf0d6;
border-top: 4px #2a7a6e solid;
}Javascript
jQuery(function(){
$(".sp-menu-icon").click(function(){
$("#gnav").slideToggle();
});
});PHP
<?php $contents = $_POST['contents'];
print('<p>内容:</p>'); ?>
カスタマイズ
hljs.initHighlightingOnLoadは、jQueryで読み込むこともできます。これなら読み込むタイミングも操れますね。
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
<pre><code>以外の、好きなタグで囲むこともできます。jQueryで以下のように、タグを指定してください。
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});その他、便利なファンクションは公式ドキュメントをお読みください。
デメリットと注意点
“<“、”>”はエスケープ必須
“<“、”>”は、<、>で置き換えないと、コードの一部として認識されてしまいます。テキストエディタで一発置き換えするとはいえ、これはちょっとめんどくさいかも。
違う言語で続けて書くときは囲みなおす
2種類以上の言語にスタイリングしたいときは、別の<pre><code>ブロックに表記する必要があります。ひとくくりにしてしまうと、最初の言語しか認識・スタイリングしてくれないようです。
こんな感じでちょっと使いづらいところもありますが、そんなに頻繁にコードを出さないブログならこれで十分かと。是非おためしください（＾＾
