highlight.js 利用時のちらつきを回避する

too long でもなんでもないので TL;DR は省略。 今回もまたしょぼいエントリで恐縮ですが、アウトプットのハードルを下げていくと何が得られるかを確かめる実験の一環と思ってお付き合い願います*1。

前回highlight.jsを導入しました。 したのですが、highlight.jsが適用されるまでのわずかな間デフォルトのスタイルで表示されるため見栄えが悪いなーと思って、ちょっと手を加えることにしました。

コードブロックをデフォルトで非表示にしてhighlight.jsのキック時に表示すればいいだけなので話は簡単です。 まずはCSSをいじって、コードブロックの初期状態を非表示とし、visibleクラスがひっついたときに表示するように改めます:

.entry-content pre.code {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.entry-content pre.code.visible {
  opacity: 1;
}

ざっくりとdisplay: none;でもいいのですが、そうすると表示時にレイアウトがガクッと変わって鬱陶しいのでopacity: 0;として代わりとします。

次にhighlight.jsのキック時にvisibleクラスを添えてあげればおしまいです:

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("pre.code").forEach((block) => {
    hljs.highlightBlock(block);
    block.classList.add("visible");
  });
});

サイト全体の読み込みが終わるまで<article>全体を透明にしておくという解決法もあるし、そういうサイトもよく見かけますけど、準備のできたコンテンツからぱっぱと表示したほうがよかろうという気がします。

*1:って言っておくとそれっぽい。