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

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Web

CORPヘッダーを使って、自分のサイトの画像を他のサイトから直リンクさせない方法

自分のサイトの画像を他のサイトから直リンクさせない方法について説明します。

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中