えじの自由帳

今の自分を書きためるブログ

Wordpress

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

2016/11/01

highlighter

(2016/11/01 追記)最新の方法を記事にしました。こちらもぜひご確認ください！

ソースコードをキレイに表示するなら「WP Code Highlight.js」を使うべし！

ブログのシンタックスハイライトにCrayon Syntax Highlighterを使っている人は多いのではないでしょうか。

Crayonは確かに設定項目も多いし、対応言語もそれなりに多い。使いやすいシンタックスハイライトの1つであると思います。

でも。

Crayonが重いと思ったことはありませんか？

改善方法を探ってみたので記事にまとめてみたいと思います。

(■photo by GavinLi)

Crayon Syntax Highlighterはなんだかんだ重かった

前までCrayon Syntax Highlighterを使っていたのですが、

  • プラグインのロードに妙な時間がかかる
  • 読み込みが遅い
  • CSSを分けて読み込むからレンダリングブロックする

などの問題点があり、乗り換え先を探していました。

  • Syntax Highlighter Evolved
  • WP-Syntax

などを考慮したのですが、highlight.jsというのが便利そうだったので試しに入れてみました。

highlight.jsがめちゃ便利！

highlight.js
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"/>

の行によって変えられます。

highlight.js test
highlight.js test
highlight.js test

ここにサンプルが置いてあるので、いろいろ試してみましょう。

例えばZenburnを試してみようと思ったら、

highlight.js/src/styles at master · isagalaev/highlight.js · GitHub
highlight.js/src/styles at master · isagalaev/highlight.js · GitHub
highlight.js/src/styles at master · isagalaev/highlight.js · GitHub

ここから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を試してみると良いかと思います。

最近ブログに書くことがたくさんあって楽しいです！ それでは！

 Wordpress