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. 注意点

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




スポンサー リンク




開発ノウハウ等


スポンサー リンク