WordPressで「highlight.js」を使って、ページの表示速度を落とさずにソースコードを綺麗に自動整形し表示する方法（Page Speed Insights対応）

WordPress備忘録

2016.04.052020.03.07

ブログなどの記事を書いていると、時々プログラムコードを書く必要になる場合があります。Wordpressでは、記事に載せたコードをキレイに見せてくれるプラグインが「SyntaxHighlighter Evolved」や「Crayon Syntax Highlighter」など、機能豊富なものが色々あります。
しかし、これらのプラグインの難点は、機能が多すぎて、重くなってしまっていることです。

Googleの「Page Speed Insights」などのページ表示速度計測サイトで調べると、このプラグインが有りと無しでは、かなりの差が生まれます。でも、コードの表示はある程度、キレイに見せたいと思いますよね。

そんな時、お勧めなのなのが、「highlight.js」というスクリプトです。
こちらのスクリプトは、ダウンロードして実装しなければなりませんが、プラグインのようにページの表示速度に悪影響を与えずに使うことができます。

残念ながら、「行番号」の表示ができなかったり「ツールバー」のようなものに対応はしていませんが、その分、軽量ですので、コードの表示がキレイになれば大丈夫という方には、一番良いのではないのでしょうか？

今回は、この「highlight.js」の設置手順を解説したいと思います。

「highlight.js」のダウンロード

「highlight.js」にアクセスして、ファイルをダウンロードします。
https://highlightjs.org/download/
※ サイトでCommon以外に整形したい言語がある方は、Otherの欄にもチェックをいれます。

スクリプトファイルの設置

ダウンロードしたZIPファイルを解凍して、FTPで”/wp-content/themes/子テーマフォルダ/js”等にアップロードします。
「footer.php」の</html>タグ以下に下記のコードを追加します。
※　*1、*2はそれぞれの環境に合わせて、書き換えてください。


<script>
(function(d){
var s = d.getElementsByTagName('script')[0];
var c1 = d.createElement('link');
c1.rel = 'stylesheet';
// cssのパスを指定（cssは好みのものを読み込み可）
c1.href = '/wp-content/themes/子テーマ/js/highlight/styles/monokai-sublime.css'; // *1
s.parentNode.insertBefore(c1, s);
})(document);
</script>
<script>
function loadScript(src, callback) {
    var done = false;
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
// jsのパスを指定
    script.src = '/wp-content/themes/子テーマ/js/highlight/highlight.pack.js'; // *2
    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();
});
</script>

記事への挿入方法

記事の作成ページで挿入したいソースコードを<pre><code>タグで囲む
挿入するコードの言語を指定する場合は、<code>タグに「<code class=”PHP”>」のように書きます。

以上の手順で、ページの表示速度も落とさずに、コードの見栄えを良くすることが可能です。
プラグインなどを利用していて、表示速度が遅くて、お悩みの方など、お試しください。
ちなみに、こちらの方法でコードを整形すると、スマホで表示した場合も、コードの部分は横スクロールできますので、文字が切れることがなく表示することだできますよ。