highlight.jsは、シンプルで軽量なシンタックスハイライターです。ソースコードを見やすく装飾してくれるスクリプトです。
WordPressでは、一時期 Crayon Syntax Highlighterが人気でしたが、読み込みが遅く、さらに表示処理に時間がかかるということが分かり、highlight.jsへ乗り換える人が増えています。
この記事では、Wordpressへスマートに導入する方法を紹介します。
概要
highlight.jsのハイライト機能は必要なものに絞られており、とても軽量です。
一方、デザインは豊富で、77のスタイルから選ぶことが出来ます。
デモ: https://highlightjs.org/static/demo/
導入方法
このシンタックスハイライト機能は、Javascript + CSSで実現されています。
WordPressに導入するには、次のように、スタイルCSSの読み込み、Javascriptの読み込み、初期化処理の3つのコードを書き込む必要があります。
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
ここで、header.phpやfooter.phpを変更すればよいのですが、しかしそうすると、後でテーマのどこを編集したのかわからなくなり、保守性が低下します。
もし子テーマを使っていたとしても、header.php や footer.phpはバージョンアップから取り残されることになり、好ましくありません。
そのためここでは、functions.php にコードを追加することで実現する方法を紹介します。
さらに、Javascriptはbodyの末尾付近に配置することにより、レンダリングブロッグを防ぎます。
その方法は、次のコードをテーマフォルダの functions.phpに追加するだけです。スクリプトをダウンロードしてくる必要もなく、簡単です。
/* Syntax highlight */
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'enqueue_highlightjs' );
function enqueue_highlightjs() {
wp_enqueue_style( 'highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css', array(), '9.9.0');
wp_enqueue_script('highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js', array(), '9.9.0', true);
}
add_action( 'wp_footer', 'initHighlightjs', 30 );
function initHighlightjs() {
echo '<script>hljs.initHighlightingOnLoad();</script>';
}
}
enqueue_highlightjs関数内で、CSSとJavascriptファイルをwordpressに登録しています。Javascriptファイルはbodyの末尾付近で読み込みように、wp_enqueue_script()の引数に trueを指定しています。
また、wp_footer関数にadd_actionでフックを追加することで、初期化コードを出力しています。add_actionの30は読み込み優先順位を指定しています。
Javascript読み込みの優先順位はデフォルト値で20が指定されているので、それより大きい数値を指定しています。
これでWordpressの各記事でhighlight.jsが有効になりました。
使用方法
基本
ハイライトさせたいソースコードを<pre><code>タグで囲むだけです。
<pre><code>echo "Hello, World";</code></pre>
このように入力すると、次のように表示されます。
echo "Hello, World";
言語指定
言語はある程度自動で認識されますが、指定する場合は、code タグに class属性を追加します。
<pre><code class="html">...</code></pre>言語一覧: http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
シンタックスハイライトさせたくない場合は、<code class=”nohighlight”>を使います。
スタイルの変更
スタイルを変更するには、スタイル一覧から好きなものを選び、読み込むCSSファイルを変更します。上のコードでは、default.min.cssを指定していますが、例えば、Artaスタイルに変更する場合は、arta.min.cssに書き換えます。
wp_enqueue_style( 'highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/arta.min.css', array(), '9.9.0');
スタイルファイルの正確な名称は、スタイル一覧ページのソースを表示すると、次のようにlinkタグのhref属性に書かれています。
<link rel="alternate stylesheet" title="Tomorrow Night Eighties" href="styles/tomorrow-night-eighties.css">このstyles/を省いたファイル名に、.min.cssの拡張子をつければ読み込めます。
変更が有効にならない場合は、キャッシュから読み込んでいないか確認してください。
白背景でのおすすめスタイルは、googlecode.min.cssです。彩度が高すぎず、目がチカチカしませんし、地味すぎでもなく、ちょうど良い色味だと思います。
以上、軽量ソースコード ハイライター highlight.js を WordPressへ導入する方法でした。
