ソースをハイライト表示するJSの重さ比較

比較といっても2つだけなんですが、HTML等のソースコードをサイトに表示させた時に見た目を装飾するJavaScriptを検証しました。(他にも良い候補があれば追加していきます)

今回もGoogleChromeのNetworkタブの比較になります。数字は環境によって異なるので参考程度に。(RequestとSizeは比較用のnone.htmlとの差。Timeはそのまま書いてます。)

結論を先に言うとソーシャルボタンと違って気にするほどの重さではないです。多少ファイルサイズが違う程度なので好みで選んでいいと思います。

ハイライト表示RequestSizeTime設置例
無し(比較用)00KB0.2秒none
SyntaxHighlighter429KB0.3秒SyntaxHighlighter
GoogleCodePrettify515KB0.3秒google-code-prettify

SyntaxHighlighter

SyntaxHighlighter3.0
おそらく一番有名で多機能。あまり使ってないので機能をほとんど知らないですが。色んな所で使われているやつです、多分。
表示させるコードの種類によって読み込まなければいけないJSファイルが決まります、今回はHTMLとJSなのでshBrushXml.jsとshBrushJScript.jsを読み込みました(shCore.jsは必ず必要)。

GoogleCodePrettify

GoogleCodePrettify
Googleで公開されているシンプルなハイライトモジュール。ドットインストールで使われていたので気になって探しました。使うファイル数がとても少ないので設置が楽です。

HTML実体参照変換

これらのJSを使っても、preにマークアップする際にはきちんとHTMLタグをエンコードしないと正しく動きません。( < や > がある為)
変換ツールは検索するといくらでも出てきますが、今回はprototype.jsにHTMLをエンコードする機能を使ったものが良さそうだと思ったので下記にサンプルを置いておきます。
prototype_unescapeHTML

参照


最終更新: 2017-10-15 (日) 22:57:02