ソースコードをWebで表示する SyntaxHighlighter

プログラムのソースコード（HTML, JavaScript, PHP)など、
Webで表示するのは、エスケープ処理などあって、面倒でした。

よく、行番号と、カラー分けでコードを表示しているテック系の
サイトを見かけるので、ライブラリを探してみました。

コードをそのまま表示するためのライブラリ、「SyntaxHighlighter」.
このブログはWordPressベースなので、JSとWordPressプラグインと
２通りのやり方を試してみました。

方法 1.） JavaScript

• SyntaxHighlighter2.0
  http://alexgorbatchev.com/wiki/SyntaxHighlighte

preタグに記述する方法

<pre class="brush: html">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- ソースの中身 -->
</pre>

textareaタグに記述する方法

<textarea name="code" class="brush: html" cols="60" rows="10">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- /ソースの中身 -->
</textarea>

• 導入サンプルHTML
  http://splitchin.com/sample/javascript/syntaxhighlighter_2/test.html

方法 ２.）WordPress プラグイン

• プラグインダウンロード
  http://wordpress.org/extend/plugins/syntaxhighlighter/installation/

［code language=”"js"”］・・・［/code］のように書きます。（［　］は半角記号に）

<ul>
<li>test</li>
</ul>

対応言語

言語	エイリアス
C++	cpp, c, c++
C#	C#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt