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 が実行される時点で既に適用された状態にすることで、レイアウト・シフトを防止します。
手順
以下の手順となります。
- highlight.js を普通に利用してページを表示し、highlight.js が適用しているCSSプロパティを調べる。
hljs
クラスに対して指定している CSSプロパティで、大きさに関わる項目のみ。- 例えば、Chrome ブラウザのデベロッパーツールを使って調べることができる。
- 見つけたCSSプロパティを、そのページが読み込んでいるCSSファイルに記述する。
- その際に指定するCSSセレクタには
hljs
というクラス名は指定しないこと。pre code
というタグに対して指定する。
- その際に指定するCSSセレクタには
上に書いた方に、Chrome ブラウザのデベロッパーツールなどを使うと、highlight.js がどんなCSSプロパティを適用しているか調べることができます。
そのページが始めの方で読み込んでいるCSSファイルにプロパティを追加するコード例は以下になります。
3. おわりに
今回紹介した方法は highlight.js に限った方法ではありません。大きさに関するスタイルを JavaScript によって変更している場合であれば応用できるはずです。