【比較】Prism.jsとhighlight.jsとgoogle-code-prettifyどれを使えばいい？

  1. レクタス
  2. システム
  3. 【比較】Prism.jsとhighlight.jsとgoogle-code-prettifyどれを使えばいい？
  1. レクタス
  2. ホームページ
  3. 【比較】Prism.jsとhighlight.jsとgoogle-code-prettifyどれを使えばいい？
最終更新日: 公開日: 2021年03月

今回はwordpressのソースコード表示用ライブラリを選ぶときに一度は目にするであろうPrism.js、highlight.js、google-code-prettifyについて書きました。
上記3つは軽量のライブラリと言われていますが、実際にそれぞれを使用したときのページ表示速度につい調べています。
また、CSSを記述した際のコード表示にかなり差があったので、それについても触れています。

プラグインではなくてライブラリを選んだほうがいい理由

wordpressのソース表示用のプラグインに限らず言えることだと思いますが、プラグイン化されているものは1つのパッケージになっているので、使用しない機能がたくさん含まれている可能性があります。ですので、余分な機能がページを遅延させてしまう恐れがあるということです。SEOの観点で言うと、ページの表示が遅い=ユーザの満足度が低いと判断されてしまうのです。

軽量と言われているが本当に軽量なのか

上記を踏まえると、最低限必要な機能が備わっているライブラリでもいいかな？と思えて来ると思います。今回はjavascriptのソースライブラリで軽量と言われているPrism.js、hightlight.js、google-code-prettifyの3つは果たして本当に軽量なのか？について調べていきたいと思います。

ページの測定までに行ったこと

1. ローカル環境にwordpressの環境を構築

本番環境では実験できないので、ローカル環境にwordpressの環境を構築しました。
Windows へ MySQL をインストールして自分のパソコンで WordPress を動かすを参考にしています。

2. Lighthouseの追加

ローカル環境ではSpeedInsightsを使えないので、Chromeの拡張プラグインとして提供されているLighthouseを使用しました。Lighthouseは開発者ツールでページのスコアの確認が行えるのでとても便利です。

それでは、本題であるPrism.jsとhighlight.jsとgoogle-code-prettifyそれぞれの速度についてみていきたいと思います。
当サイトではgoogle-code-prettifyを用いているのでこちらを基準にします。また、行番号ありの条件下です。

Prism.js速度

  • テーマ:OKAIDIA
  • 選択言語：HTML,CSS,PHP,javascript
  • インストール時に選択できる行番号表示用のプラグインを使用

highlight.js速度

  • テーマ：a11y-dark
  • 選択言語：HTML,CSS,PHP,javascript
  • 通常は行番号なしのhighlight.jsですが、行番号ありの条件のもと実験を行っているのでhighlight-line-numbersという行番号表示用のプラグインを使用

【★基準】google-code-prettify速度

  • テーマ：Sons-Of-Obsidian
  • 選択言語：HTML,CSS

当サイトで用いているのでこれが基準になります。

速度の違いはあまりない

以上を踏まえると、一番高速なのがgoogle-code-prettify、次いでPrism.js、最後がhighlight.jsという結果になりましたが、測定するたびに値は変わってくるので大差はないということがわかりました。速度の違いに差はないということでしたので、実際に使ってみた使いやすさや、コード表示のきれいさを見てみたいと思います。

結局は使いやすさ？見た目？

Prism.js使いやすさ・見た目

  • langage-xxxで言語の指定必要あり
  • 行番号プラグインあり、使用時はline-num
  • 表示で気になる点はなし

highlight.js使いやすさ・見た目

  • 言語の指定必要なし
  • 行番号用のプラグインありだが表示が少しわかりにくいので微調整必要
  • CSSでセレクタ等を使用したときに表示がわかりにくくなる

google-code-prettify使いやすさ・見た目

  • lang-xxxで言語の指定必要あり
  • 行番号表示あり、使用時はline-num
  • inline-blockのinlineのみ色が変わってしまう

Prism.jsがおすすめ

実際に使ってみた使いやすさにも大きな差はないように感じました。ですので、結局は見た目の好みになってしまうのですが、私はPrism.jsが一番見やすいと思いました。
CSSでセレクタを使用した際や、要素を指定した際の微妙な表示の違和感が、比較した3つの中で一番少ないと思います。

関連ページ

タグ ,
 

Contact

ご質問等ありましたら，下のフォームからお願いします．

 
   
contact
Pagetop