[highlight.js] ブログにシンタックスハイライトを導入する

0
468
views

今回は、記事中に引用したソースコードを見やすくさせるシンタックスハイライタ highlight.js を WordPress に導入してみます。

シンタックスハイライト

コードを色付けして表示してくれることをシンタックスハイライトといいます。

シンタックス(Syntax)とはプログラムの構文のことで、ハイライト(highlight)はその構文の明暗を強調することを意味します。

highlight.js

今回ブログにシンタックスハイライトの機能を持たせるために利用するのは、highlight.js というオープンソースの JavaScript製シンタックスハイライタです。

https://github.com/isagalaev/highlight.js

js ファイルの作成

まず js ファイルを作ります。この js ファイルの役割は大きく3つあります。

  • シンタックスハイライト用 CSS ファイルを読み込む
  • highlight.js 本体を読み込む
  • 読み込んだ highlight.js を起動させる

js ファイルを作る場所は自由ですが、今回は wp-content ディレクトリ直下の uploads フォルダ内に作ります。uploads フォルダ内に highlight フォルダを新規で作り、その中に以下の内容で fire-highlight.js ファイルを作ります。

var elements = document.getElementsByTagName("pre");
(function(d){
    if (elements.length > 0) {
        var s = d.getElementsByTagName('script')[0];
        var c1 = d.createElement('link');
        c1.rel = 'stylesheet';
        c1.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai-sublime.min.css';
        s.parentNode.insertBefore(c1, s);
    }
})(document);
function loadScript(src, callback) {
    if (elements.length > 0) {
        var done = false;
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js';
        head.appendChild(script);
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if ( !done && (!this.readyState ||
                    this.readyState === "loaded" || this.readyState === "complete") ) {
                done = true;
                callback();
                // Handle memory leak in IE
                script.onload = script.onreadystatechange = null;
                if ( head && script.parentNode ) {
                    head.removeChild( script );
                }
            }
        }
    }
}
loadScript("highlight.min.js", function() {
    hljs.initHighlightingOnLoad();
});

ファイル読み込みコードは下記の記事を参考にしています。

WordPress「highlight.js」を非同期かつ必要なページだけで読み込む方法 | Blue Leaf
http://blue-leaf81.net/archives/1011

pre タグを探す

fire-highlight.js では最初に htmlソースから pre タグを検索します。pre タグが見つかれば、CSS や highlight.js の読み込みを始めます。シンタックスハイライトの必要のないページ……つまり pre タグの無いページではファイルを読み込みません。

読み込みファイルの設定

今回のコード例では、c1.href で CSSファイル、script.src で highlight.js ファイルのパスをそれぞれ設定しています。読み込み先は CDN(コンテンツデリバリーネットワーク)を利用しています。

highlightjs/cdn-release
https://github.com/highlightjs/cdn-release

CDN サービス

公式サイトでは2つの CDNブラウジングサービスが紹介されています。cdnjs と jsDelivr です。

highlightjs – cdnjs.com
https://cdnjs.com/libraries/highlight.js

highlight.js free CDN links · jsDelivr
http://www.jsdelivr.com/#!highlight.js

highlight.js のアップデートは頻繁に行われているので、fire-highlight.js で設定しているパスは、CDNサービスなどでチェックして常に最新のパスに更新することをお勧めします。

スタイルの選択

highlight.js ではハイライトの見栄えを変える CSS が豊富に用意されています。どのテーマ(CSS)を使うとどんな見栄えになるかは、デモサイトが参考になります。

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

サイドバーに並んでいる Styles を選択することで、見栄えが確認できます。

前述で作った fire-highlight.js の CSS ファイルのパス設定部分、

c1.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai-sublime.min.css';

ここでテーマが monokai-sublime になっているので、デモサイトと CDNブラウジングサービスを参考にして、適宜好きなテーマに設定します。次の画像は、CDNブラウジングサービスで、monokai-sublime のパスを参照したところです。

キューイングファイルを新規作成

次に先程作った fire-highlight.js をエンキューするファイルを作ります。

キューで管理

WordPress では JavaScript や CSS などのファイルの読み込みをキューで管理しています。キュー(queue)とは先入れ先出し(FIFO)のデータ構造です。先入れ先出しは、ちょうどレジの順番待ちのような構造で、先に入ったデータが先に出ていきます。

データを入れることをエンキュー(enqueue)、データを取り出すことをデキューと(dequeue)といいます。

つまり、使いたい JavaScript ファイルをエンキューしておけば、WordPress がデキューしてソースにファイルの読み込みコードを出力してくれるわけです。

スクリプトのエンキュー

では以下のコードで add-my-css-script-files.php (ファイル名は任意)を作り、スクリプトファイルのエンキューを行います。今回はファイルを inc ディレクトリに作ります。


実際にエンキューを行うと、下記のようにソースにデキューされます。

エンキューファイルの読み込み

今回はエンキューアクションを外部ファイル化したので、これを読み込むように functions.php に記述をします。

require get_template_directory() . '/inc/add-my-css-script-files.php';

手順のまとめ

今回のシンタックスハイライト導入の手順をおさらいします。

  1. highlight.js 読み込み/起動ファイル(fire-highlightjs.js)の作成
  2. エンキューファイル(inc/add-my-css-script-files.php)の作成
  3. functions.php でエンキューファイルのインクルード

以上のポイントを押さえれば、highlight.js の導入は完了です。

画面チェック

では最後に highlight.js が有効になっているか、画面を見てチェックします。次の画面は highlight.js 導入前です。

そして次が highlight.js 導入後です。

きちんとコードがハイライトされていますね。