highlight.js が引き起こすレイアウト・シフトを防止する

1. はじめに

highlight.js について

highlight.js というライブラリを使うと、Webページ上の「コード」部分を見やすくハイライト表示させることができます。

本サイトでも紹介したことがあります。

highlight.js の問題点

この「色をつける」処理は、Webページが表示されたときに実行されます。この際、色がつくだけでなく コードの周りの余白の大きさやコードの文字サイズなども変わるため、画面上のレイアウトがずれる現象が発生してしまいます。レイアウト・シフトという現象です（GoogleのUX指標でいうところの CLS (Cumulative Layout Shift) ）。

2. レイアウト・シフトを防止する

考え方

レイアウト・シフトを防止する方法は他にもあるでしょうが、ここでは CSS の記述を追加して防止する方法を紹介します。

そもそも highlight.js が何をやっているのかというと、ページが表示される際に、ページ内の <pre><code> タグを順番に見ていき、<code> タグに hljs クラスを追加しています。すると hljs クラスで定義されたCSSプロパティが適用されてコード部分のスタイルが変わるという仕組みです（実際はプログラミング言語毎に用意されたクラスも追加されます）。

これを踏まえ、highlight.js によって追加されるCSSプロパティのうち、大きさに関する項目のみを、highlight.js が実行される時点で既に適用された状態にすることで、レイアウト・シフトを防止します。

手順

以下の手順となります。

1. highlight.js を普通に利用してページを表示し、highlight.js が適用しているCSSプロパティを調べる。
   • hljs クラスに対して指定している CSSプロパティで、大きさに関わる項目のみ。
   • 例えば、Chrome ブラウザのデベロッパーツールを使って調べることができる。
2. 見つけたCSSプロパティを、そのページが読み込んでいるCSSファイルに記述する。
   • その際に指定するCSSセレクタには hljs というクラス名は指定しないこと。pre code というタグに対して指定する。

上に書いた方に、Chrome ブラウザのデベロッパーツールなどを使うと、highlight.js がどんなCSSプロパティを適用しているか調べることができます。

そのページが始めの方で読み込んでいるCSSファイルにプロパティを追加するコード例は以下になります。

3. おわりに

今回紹介した方法は highlight.js に限った方法ではありません。大きさに関するスタイルを JavaScript によって変更している場合であれば応用できるはずです。