7. html/シンタックスハイライト/SyntaxHighlighter/autoloader を使用する

 
7.1 autoloader とは
7.2 設置方法

7.1 autoloader とは

 「SyntaxHighlighter」の 3系かららしいのですが、autoloader という Javascript が用意されています。  これは、html 内のタグを読んで、中に記述してある <pre class="brush: xxx;"> の部分を解釈して対応する Javascript をロードするというもの。  前の方の項で書いてあるようにヘッダで Javascript をインクルードする場合、後に何が出現するかわからないし、将来的にタグが増えることも考えられるので、使用していないタグに対応するものも含めて全部読み込んでおかなければならない。  これは、ブラウザにいささかなりとも負担をかけるわけですな。  実際、あらかじめ読み込む場合と autoloader で読み込む場合では、体感できるくらいの表示時間差があります。  あらかじめ読み込んでいる場合は、肉眼ではっきりハイライトする前の文字が見えますが、autoloader を使用した場合は、ハイライト表示になる前の時間がやや短くなります。  早めにこれを使っていればよかったのですが、自分が馬鹿なせいで、使用方法がわからなくて少し時間がかかっちゃいました。

7.2 設置方法

 やることは、ヘッダに書いてあるインクルードファイルの記述と script の記述を変更するのですが。  肝心なのは「autoloaderscript を記述する場所が「html」の末尾の方」であるということです。  このあたり「参考サイトをよく読んでいなかった」というのもあるのですが。  autoloader は、ソースコードを読み込んでからロードする javascript を決めること、javascript 自体、クライアントサイドで実行することあたりを考えあわせてみたら、ソースを記述した後にロードしないと意味がないってことですな。  で、書き換えるのは2か所になるわけです。  <head></head> 間のタイプ別 javascript ファイルのインクルードをなくして、autoloader のインクルードを追加。  そして javascript の実行部分を削除します。  すなわち
<head>












</head>

 7行目でタイプ別の javascript ファイルのインクルードをなくして shAutoloader.js をインクルードしています。
 10行目は使用したいテーマごとに変えます。

 そして </body> の前か後ろに以下を記述します。
 (参考サイトでは </body> の後ろと記述されていますが、直前でも有効です)

<script>
SyntaxHighlighter.autoloader(
		'applescript			/highlight/scripts/shBrushAppleScript.js',
		'actionscript3 as3		/highlight/scripts/shBrushAS3.js',
		'bash shell				/highlight/scripts/shBrushBash.js',
		'coldfusion cf			/highlight/scripts/shBrushColdFusion.js',
		'cpp c					/highlight/scripts/shBrushCpp.js',
		'c# c-sharp csharp		/highlight/scripts/shBrushCSharp.js',
		'css					/highlight/scripts/shBrushCss.js',
		'delphi pascal			/highlight/scripts/shBrushDelphi.js',
		'diff patch pas			/highlight/scripts/shBrushDiff.js',
		'erl erlang				/highlight/scripts/shBrushErlang.js',
		'groovy					/highlight/scripts/shBrushGroovy.js',
		'java					/highlight/scripts/shBrushJava.js',
		'jfx javafx				/highlight/scripts/shBrushJavaFX.js',
		'js jscript javascript	/highlight/scripts/shBrushJScript.js',
		'perl pl				/highlight/scripts/shBrushPerl.js',
		'php					/highlight/scripts/shBrushPhp.js',
		'text plain				/highlight/scripts/shBrushPlain.js',
		'py python				/highlight/scripts/shBrushPython.js',
		'ruby rails ror rb		/highlight/scripts/shBrushRuby.js',
		'scala					/highlight/scripts/shBrushScala.js',
		'sql					/highlight/scripts/shBrushSql.js',
		'vb vbnet				/highlight/scripts/shBrushVb.js',
		'xml xhtml xslt html	/highlight/scripts/shBrushXml.js'
	);
SyntaxHighlighter.all();
</script>