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

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

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

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

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

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

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

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

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

記事への挿入方法

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

※ 挿入するコードは、<や>などの文字をエスケープしてあげないといけませんが、Google Chomeをお使いであれば「HTML Escape Helper」を使うと簡単に変換できます。
HTML Escape Helper

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


☆もしこの記事が気に入っていただけましたなら、SNSでシェアをお願いします。非常に励みになります。 ☆フォロー・配信購読はこちら