6-7-3-6. SyntaxHighlighter によるソースコードの掲載要領

1. Version の選択

Version により下記の違いがある。当ページでは、Ver 3.x系を使用。

　◆ Ver 3.x系
　①　ツールバー・FLASHによるクリップボードへコピーする機能の廃止。
　②　ダブルクリックでコードをテキスト表示。
　③　コードを直にコピーしても行番号は入らない。
　④　コードが長くても折り返さない＝スクロールバー表示。
　⑤　コード定義用のJavaScriptをオートロードできる。
　⑥　title属性の利用が可能。

　◆ Ver 2.x系
　コード表示画面にカーソルを乗っけると、右上にアイコン群が表示される。
　内容は
　 「コードを別ウインドで表示」
　 「クリップボードへコピー」「印刷」
　 「バージョン情報」
　となっている。
　
　①　横幅で折り返される。
　②　コードを直にコピーすると、行番号まで入る。
　　（別ウインドで表示させたもの、
　　クリップボードへコピーする機能、であれば入らない）
　③　クリップボードへコピーする機能はFLASHを利用しているため、
　　　環境によっては不具合あり。


2. 導入手順

①．配布サイトから「SyntaxHighlighter」一式をダウンロードする
　　　SyntaxHighlighter:Download

　②. ファイルを展開し、必要なフォルダだけを抜き出す
　　必要なフォルダは、scripts（JSフォルダ）と　styles（CSSフォルダ）のみ。
　　さらに、scripts（JSフォルダ）の中で必要なファイルは、
　　表示する言語形式の Brush name だけでよい。

　③．ウェブサイトへアップロードする
　　scripts　と　styles　フォルダをアップロードする。


3. 実装例

①．SyntaxHighlighter の読み込みを head の最後辺りに記述

	<!-- SyntaxHighlighter のオートローダー -->
	<script type="text/javascript" src="../scripts/shCore.js"></script><!-- コアスクリプト(必須) -->
	<script src="../scripts/shAutoloader.js"></script><!-- オートローダー -->
	<link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"><!-- デフォルトの配色を使う場合 -->

②. オートロードのためのスクリプトを body の最後に記述（表示する言語分だけでよい）

	<script>
	SyntaxHighlighter.autoloader
	(
	"css      	            ../scripts/shBrushCss.js",
	"js jscript javascript  ../scripts/shBrushJScript.js",
	"php      	            ../scripts/shBrushPhp.js",
	"xml xhtml xslt html    ../scripts/shBrushXml.js"
	);
	SyntaxHighlighter.all();
	</script>

③．表示するソースコードの記述（HTML、CSS、JavaScript、PHP なら、
それぞれ下記のように指定）

	<!--HTMLソースを表示する場合-->
	<pre class="brush:html">
		～　ここにソースコードを記述する　～
	</pre>
	
	<!--CSSソースを表示する場合-->
	<pre class="brush:css">
		～　ここにソースコードを記述する　～
	</pre>
	
	<!--JavaScriptソースを表示する場合-->
	<pre class="brush:js">    
		～　ここにソースコードを記述する　～
	</pre>
	
	<!--PHPソースを表示する場合-->
	<pre class="brush:php">   
		～　ここにソースコードを記述する　～
	</pre>

4. 注意点

　面倒でも　&、"、<、>　等を　< & >　等に、実体参照変換をしなければならない。





PAGE TOP ▲

開発ノウハウ等