Web

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

投稿日:2021年2月1日 更新日:

1. はじめに

highlight.js について

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

highlight.js によるハイライト表示
highlight.js を使って HTMLをハイライト表示したところ

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

Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

2018.12.22

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プロパティを適用しているか調べることができます。

Chrome デベロッパーツールを利用しているところ
Chrome デベロッパーツールで、CSSプロパティを調べる

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

3. おわりに

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

Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

2018.12.22
Web Vitals

LCP を意識した Highlight.js の読み込み方

2021.02.04
Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

2021.03.15

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

no image

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …