web/highlight の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• web/highlight へ行く。
• web/highlight の差分を削除

#author("2023-12-24T21:30:28+09:00","default:nemusg.pad","nemusg.pad")
#author("2025-08-25T00:25:10+09:00;2023-12-24T21:30:28+09:00","default:nemusg.pad","nemusg.pad")
* ソースをハイライト表示するJSの重さ比較 [#ibfda17a]

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

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

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

|ハイライト表示|Request|Size|Time|
|無し（比較用）|0|0KB|0.2秒|
|SyntaxHighlighter|4|29KB|0.3秒|
|GoogleCodePrettify|5|15KB|0.3秒|

** SyntaxHighlighter [#waac086a]

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

** GoogleCodePrettify [#lc189d71]

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

** HTML実体参照変換 [#l76ae302]

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

** 参照 [#y6d151bd]

- [[Syntax Highlighter系プラグインの比較と高速化:http://tokkono.cute.coocan.jp/blog/slow/index.php/wordpress/speed-up-of-rendering-syntaxhighlighter/]] PHPのも含まれていますが沢山あります
- [[ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす:http://wada811.blogspot.com/2012/02/syntaxhighlighter30.html]]
- [[ブログ上でプログラムソースを表示する方法2:http://blog1.erp2py.com/2010/10/blog-post.html]] SyntaxHighlighterの行番号非表示の方法等
- [[ハイライトもGoogle流 google-code-prettifyでソースコードに色付けを:http://news.mynavi.jp/articles/2007/03/27/gcp/index.html]]

#include(parts/feedback,notitle)