軽量ソースコード ハイライター highlight.js を WordPressへ導入する方法。

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へ導入する方法でした。