Highlight.jsを必要な記事だけに読み込む方法

Highlight.jsを全ての記事で使っている方には問題ないのですが、ソースコードをハイライトする必要のない記事でもHighlight.jsを読み込むのはサイトの速度的にどうなんだろう…と思いましたので、ちょちょいとHighlight.jsを必要な記事だけに読み込むようにカスタマイズ

Highlight.jsの使い方は『コードをハイライトで見やすくするJSライブラリHighlight.jsの紹介』という記事を書きましたので、是非ご覧ください。

Highlight.jsで起こりうる遅延

highlight.min.js自体は19.3 KBと非常に軽量なので、読み込むだけであればほとんど遅延は見受けられません。

そもそも読み込み自体もいろいろなファイルと一緒に並列にダウンロードされるので、体感できるだけの遅延は起きないと言っても過言ではありません。

ただ、塵も積もればなんとやらなので、19.3KBでさえも無いに越したことはないと思うのです。

PageSpeed Insightsでも怒られる原因になるしね！

highlight.min.jsで起こる遅延

勿論、ソースコードをハイライトしてる記事では怒られます。HTMLの書き換えとかあるから仕方ないんだろうけど1.175msてかなり重いんじゃねこれ…。

というのは一旦置いといて、Highlight.jsを必要な記事だけで読み込むようにしましょう。

Highlight.jsを必要な記事だけで読み込むコード

cloudflareのCDNにホストされているHighlight.jsを使う場合のコードになります。最新バージョンのHighlight.jsを使いたいは『Getting highlight.js』で確認できるのでコピペして使いましょう。

functions.phpに追記して使いましょう。

function load_higlight_js() {

    global $post;
    if( false !== strpos( $post->post_content, '<pre><code' ) ){
        echo '<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">';
        echo '<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>';
        echo '<script>hljs.initHighlightingOnLoad();</script>';
    }
}
add_action( 'wp_footer', 'load_higlight_js');

<pre><codeがあった時に、wp_footer 内で読み込んでね。というコードになっているので、<pre><code を他でも使っている場合は、適宜変更して使いましょう。