highlight.jsを対象要素が表示されたら読み込んで実行させる方法:メモ

試したらできたのでメモ的に。とりあえず動いたからいいかという程度の内容なので参考にされる方は留意ください。

前提

• highlight.jsを使用
• ページ内にターゲットとなるpreタグがあり、そのタグが表示されたらhighlight.jsを読み込み実行させる

タイトルでは「対象要素が表示されたら」と書いていますが、実際には表示される手前で読み込ませます。
なお一応WordPressサイトである当ブログで試した内容ですが、仕組み的にはWPに限りません。

highlight.js

• highlight.js

詳細は上記URLで確認ください。

サンプルコード

まず、highlight.pack.jsの一部を書き換えます。

initHighlightingOnLoad:function(){window.addEventListener("DOMContentLoaded",w,!1)},
//上記を探し、以下のように書き換える
initHighlightingOnLoad:function(){w()},

ついで、highlight.pack.jsの最下部に以下を追加します。

hljs.initHighlightingOnLoad();

これでhighlight.pack.jsを読み込んだら即実行されるようになります。もう少しスマートにできないかと多少試しましたが、ぱっと思いついた他の手段では実現できず。

次に対象となるHTMLやPHPの下部に以下を記述します。このサンプルでは使っていませんが、addEventListenerと組み合わせるのもよいと思います。

<script>
//ターゲットとなる要素を取得
const elems = document.getElementsByTagName("pre");
//ターゲットが一つでもあれば実行
if (elems.length >= 1) {
  const options = {
    root: null,
    rootMargin: "100px",
    threshold: 0
  };
  //コールバック
  const callback = function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        //スクリプトタグの生成と設置
        const head = document.getElementsByTagName('head');
        const script = document.createElement('script');
        //highlight.pack.jsまでのパスを設定
        script.src = 'https://example.com/js/highlight/highlight.pack.js';
        head[0].appendChild(script);
        //監視の解除
        observer.unobserve(entry.target);
      }
    });
  };
  //IntersectionObserverによる監視の開始
  const observer = new IntersectionObserver(callback, options);
  observer.observe(elems[0]);
}
</script>

constやIntersectionObserverを使っているので、必要に応じて書き換えやフォールバックを追加します。

結び

ほとんど効果がないかとは思いますが、WPの場合で単にwp_enqueue_scriptなどで読み込ませていると不要なページにまで出力されるのが気にはなっていましたので、その点だけでも解消できたのでまぁ良かったかと思います。もっともそれだけならIntersectionObserverによる監視は要りませんが。