Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう
2016/11/01
(2016/11/01 追記)最新の方法を記事にしました。こちらもぜひご確認ください!
ブログのシンタックスハイライトにCrayon Syntax Highlighterを使っている人は多いのではないでしょうか。
Crayonは確かに設定項目も多いし、対応言語もそれなりに多い。使いやすいシンタックスハイライトの1つであると思います。
でも。
Crayonが重いと思ったことはありませんか?
改善方法を探ってみたので記事にまとめてみたいと思います。
Crayon Syntax Highlighterはなんだかんだ重かった
前までCrayon Syntax Highlighterを使っていたのですが、
- プラグインのロードに妙な時間がかかる
- 読み込みが遅い
- CSSを分けて読み込むからレンダリングブロックする
などの問題点があり、乗り換え先を探していました。
- Syntax Highlighter Evolved
- WP-Syntax
などを考慮したのですが、highlight.jsというのが便利そうだったので試しに入れてみました。
highlight.jsがめちゃ便利!
何がいいかって
- 割と更新がある(ver8.2が出たのは8/20です。最近だぁ)
- 自動言語判別
- 言語多数(92言語、SQLとかDiffとかSwiftもハイライト)
- カラーテーマ多数(49テーマ)
- 複数言語が混じったコードもハイライト可
- 特殊なマークアップをしなくて良い(
<pre><code>
で囲めば勝手にハイライトしてくれる) - 軽い
- プラグインを使わない
- etc.
てなところ。ごてごての機能付きSyntax Highlightを好む人もいらっしゃるかと思いますが、
シンプルさを求めるならhighlight.jsがラク。
hightlight.jsの導入
導入がカンタンなのがhighlight.jsの強みの1つ。
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
この3行をヘッダー内に埋め込むだけで<pre><code>
と</code></pre>
の間をハイライトしてくれます。
要するに、cssとjavascriptを読み込んでhljs.initHighlightingOnLoad();
でハイライト開始するだけ。ラク。
[html][/html]
で囲むとか特殊な記法は必要無いし、基本的には言語を明示しなくても勝手にやってくれます。
言語を指定したいときは<pre><code class="python"></code></pre>
などとすればよろしい。
ハイライトしたくないときは<pre><code class="nohighlight"></code></pre>
とすればよろしい。
highlight.jsのカスタマイズ
カラーテーマを変える
カラーテーマは、
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"/>
の行によって変えられます。
ここにサンプルが置いてあるので、いろいろ試してみましょう。
例えばZenburnを試してみようと思ったら、
ここからzenburn.css
を見つけ、.css
の前に.min
をつけて
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/zenburn.min.css"/>
とすればOK。
ハイライト対象を変える
<pre><code></code></pre>
ではなく、ただの<pre></pre>
をハイライトしたい場合も多いと思います。(Crayonを元々使っていた場合など)
その時は、
<script>hljs.initHighlightingOnLoad();</script>
の行をいじりましょう。
<script>
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
と書けば、<pre>
要素をハイライトすることができますし、'pre'
のところを変更すれば違う要素もハイライトすることができます。
タブの幅を変える
タブの幅をスペース4つでなくスペース2つにしたいときは、ハイライトを開始する前にhljs.configure({ tabReplace: " " });
を実行すればOK。
高速化したい
ヘッダーにCSSとJSとonloadのスクリプトを全部まとめて置くとレンダリングブロックしてしまいます。
そこでheader.php
に
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"/>
を、footer.php
の``の前などに
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
を置くと少し高速化出来ます。
まとめ
シンプルなシンタックスハイライトがいいと思っている人や、Crayonに飽き飽きした人はhighlight.jsを試してみると良いかと思います。
最近ブログに書くことがたくさんあって楽しいです! それでは!