web/highlight の履歴(No.1)

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

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

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

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

ハイライト表示RequestSizeTime
無し（比較用）00KB0.2秒
SyntaxHighlighter429KB0.3秒
GoogleCodePrettify515KB0.3秒

SyntaxHighlighter#

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

GoogleCodePrettify#

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

HTML実体参照変換#

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

参照#