ソースコードを表示するにはhighlight.jsが軽量ですごくいい！Crayonとも互換性あり

こちらの記事は2015年2月に公開したものです。情報が古くなっていますのでご注意ください。

今までソースを表示するのに使用していたプラグインCrayon Syntax Highlighterから乗り換えです。

highlight.jsはWordPressのプラグインではないのですが、設置は簡単で、テーマカラーは何十種類もあります。さらにCDNからコード読み込むことができるのでCrayon Syntax Highlighterに比べて格段に軽量なのです。頻繁にコードを掲載することがないのならプラグインを使うよりこちらの方がサイトの高速化にもつながりそう。

highlight.jsに変えた理由

highlight.jsはCrayon Syntax Highlighterに比べると表示はとてもシンプル。行数の表示もないし、各行の色は縞模様で表示されたりはしません。シンプルだからその分コードが軽いのですね。

それに引き替えCrayon Syntax Highlighterは重い。とにかくおもい。なんかいっぱい読み込んでくる。嫌だったんですけど変わりの物もなかったのでなんとなく使っていました。

わたし、コードはけっこうブログに載せるのでhighlight.jsじゃちょっとシンプルすぎてわかりにくいかなーとは思うのですが、やっぱり軽量な方がすき。そんな訳でさよなら、クレヨン！

highlight.jsの設置方法

設置方法はカンタン。CSSとJavaScript はCDNを設置することできるのです。それとJavaScriptの呼び出し部分の数行のコードをhead内に書き込むだけ。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

JavaScriptは＜/body＞の直前でもいいかもしれませんね。

上記コードは2015.2.19現在のコードです。更新が頻繁に行われているようですので、サイトにて最新版のCDNのコードをご確認ください。

コードの表示方法

上記のコードを使用するとpreタグでHTMLエスケープされたコードを囲むだけです。

＜pre＞<a href=”https://39life.net/” target=”_blank”>SAKULIFE</a>＜/pre＞

WordPressでのHTMLエスケープは簡単で、ビジュアルモードにコードを貼り付け、テキストモードを表示させると自動でHTMLエスケープされた文字が表示されます。わたしはビジュアルモードは非表示にしているので、何かいい方法をと探したところ個人的にChromeの拡張機能を作ったという方のサイトにたどり着き、使わせてもらってます。

madroom project: ブログにソースコードを書く時に使う、Chrome用エスケープツールを(結構前に)作りました

Crayon Syntax Highlighterとの互換性

クレヨンは特に設定などしていなければpreタグにクラスのついたコードが自動的に付与されています。こんな感じ→＜pre class=”lang:default decode:true ” ＞。

highlight.jsはデフォルトの状態は＜pre＞＜code＞~~コードの入力~~＜/pre＞＜/code＞という具合にコードをpreとcodeタグの後に入力しますが$(document).ready(function~~略~~のコードで呼び出すことによってcodeタグを省けるようです。下記のサイトを参考にさせていただきました。

Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう

highlight.jsのカスタマイズ

スタイルシートの種類はここから選ぶことができます。下記の左側にある「Style」のところからお好みのものを探しましょう。

https://highlightjs.org/static/demo/

設置方法のところに載せているのはdefaultのコードの場合です。好みのスタイルの名前をdefaultの文字と入れ替えます。スペルはhttps://github.com/isagalaev/highlight.js/tree/master/src/stylesに載っているものに置き換えてください。（大文字、ハイフン、ドットなど気をつけてください）

例えばスタイルを「Atelier Seaside – Dark」にしたい場合は、

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/atelier-seaside.dark.min.css">

と記述します。

さらにちょっとカスタマイズ

わたしはCDNのCSSは読み込まず、ここから必要な言語だけをピップアップしDLしたスタイルシートをカスタマイズしてテーマに組み込み読み込ませています。

理由はわたしの環境ではスマホでの表示でゆらゆら動くのが気になったのと、横にスクロールを付けたかったのです。（デフォルトだとoverflow-x:auto;になっているためコードは折り返します）

.hljs {
  display: block;
　word-wrap: normal;
  overflow-x:scroll;
  padding: 0.5em;
  border-radius:5px;
  margin:1em auto;
  line-height:1.4;
  font-size:90%;
  -webkit-text-size-adjust: none;
}

こんな感じにして、あとは文字色や背景などを好みの物にしています。横スクロールを出したい場合は参考にしてみてください。

テーマにてword-wrap:break-wordで折り返しの設定がされている場合、word-wrap: normal;を指定してあげないとoverflow-x:scroll;が効かないようです。STINGER5ではword-wrap:break-wordはbodyに設定してありますよ！

まとめ

クレヨンに比べるとちょっと手間がかかりますが、ダメだったらすぐに戻せる互換性もあるのでしばらく使ってみようと思います。