[Javascript-便利なスクリプト] ソースコードをハイライト表示 Syntax Highlighter


この記事は過去のものです。
ソースコードをハイライト表示 Syntax Highlighter 2.0 を参照してください。


Web上でソースコードを書くとき、ハイライトがきけば見やすくなるけど、わざわざ色指定するのが面倒だとは思いませんか？
そんな煩わしさを一発で解決してくれるのが「SyntaxHighlighter」です。

「SyntaxHighlighter」は、このサイトでソースコードを表示するために実際に使っているスクリプトです。
ダウンロードは、先のリンクから行ってください。
圧縮形式はrarになっていますので、解凍できない方はLhaplusや7-ZIPのような、RARを解凍することが可能なフリーソフトを使用すればいいでしょう。

「SyntaxHighlighter」の使い方

使い方はいたって簡単です。
ヘッダ部分でスクリプトの呼び出し、ページ表示完了時にハイライト処理を行わせるためのスクリプトを記述するだけです。
スクリプトは「shCore.js」と、言語に応じて必要な物のみ呼び出せば良いです。

対応する言語は以下の通りです(コロンの後ろに記述しているものがクラス名になります。)

・shBrushCpp.js
	C++         ：cpp, c, c++
・shBrushCSharp.js
	C#          ：c#, c-sharp, csharp
・shBrushCss.js
	CSS         ：css
・shBrushDelphi.js
	Delphi      ：delphi, pascal
・shBrushJava.js
	Java        ：java
・shBrushJScript.js
	Java Script ：js, jscript, javascript
・shBrushPhp.js
	PHP         ：php
・shBrushPython.js
	Python      ：py, python
・shBrushRuby.js
	Ruby        ：rb, ruby, rails, ror
・shBrushSql.js
	Sql         ：sql
・shBrushVb.js
	VB          ：vb, vb.net
・shBrushXml.js
	XML/HTML    ：xml, html, xhtml, xslt


物は試しです。サンプルとしてJavascritのソースコードを表示させるコードを作成してみましょう。
今回は [site_root]/js/sh/ 内にScriptやStyles等のディレクトリを設置していると仮定したソースです。
サンプルのhtmlは [site_root]/sh.html とします。

ソースコードは以下のような感じです。

<html>
<head>
	<title>SyntaxHighlighter</title>
	<link rel="stylesheet" type="text/css" href="js/sh/Styles/SyntaxHighlighter.css" />
	<script type="text/javascript" src="js/sh/Scripts/shCore.js"></script>
	<script type="text/javascript" src="js/sh/Scripts/shBrushJScript.js"></script>
	<script language="javascript">
		window.onload = function () {
			// クリップボードにテキストをコピーするためのswfファイル
			// clipboard.swfのパスを指定
			dp.SyntaxHighlighter.ClipboardSwf = 'js/sh/Scripts/clipboard.swf';
			// シンタックスハイライトを適応するタグの名前を指定
			dp.SyntaxHighlighter.HighlightAll('code');
		}
	</script>
</head>
<body>
<!--
	nameはJavascript部分のHighlightAllで指定している物と同じ名前を指定
	classは貼り付けるソースコードの言語を指定
	今回貼り付けるのはJavascriptなので、classはjsを指定します。
-->
<pre name="code" class="js">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/SyntaxHighlighter/Scripts/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</pre>
</body>
</html>


簡単に、ごちゃごちゃせずにハイライトを適応させる事ができるので、結構オススメです。
「ソースコードを綺麗に表示したい！」という方は活用してみてはいかがでしょうか？

「Javascript」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。

作成日：2008年05月25日(Sun) / 更新日：2009年08月22日(Sat)