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

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Chrome

ブロックされた Cookie を確認する方法 (Chrome の場合)

Chrome ブラウザにおいて、ブロックされた Cookie を確認する方法について説明します。

Chrome

Chrome で複数のユーザーを使い分ける方法

目次1. Chrome のユーザー(プロフィール)について2. ユーザー(プロフィールお)毎に管理できるもの3. ユーザーのデータ(プロフィール)がある場所4. ユーザーの管理ユーザー管理ユーザー名と …

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …

Web

Webサイトに使用されている色のコントラストをチェックする

目次1. はじめに2. Webコンテンツで推奨されるコントラスト比3. コントラスト比をチェックすることができるサービス4. コントラスト比の問題を自動的に検知する 1. はじめに 本ページでは、We …