最近はブログ上でプログラムのコードを記載する機会が増えています。完全に情報屋な感じですねorz
それはさておき、となるといかにコードを分かりやすく表現するかです。ちらほら行番号やらをご丁寧に書き込んでいる人を見かけて、どうやってるのかなーと調べてみたら、「SyntaxHighlighter」というライブラリを活用していることが分かりました。その利用方法をご紹介します。

まず下記アドレスからライブラリをダウンロードします。今回はバージョン3.0.83をダウンロードしました。

そして解凍し、適当なディレクトリに保存します。

次にコードを記載するページのヘッダーに下記コードを入力。

<link rel="stylesheet" href="/SyntaxHighlighter/styles/shCore.css" type="text/css" />
<link rel="stylesheet" href="/SyntaxHighlighter/styles/shCoreDefault.css" type="text/css" />
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shBrushCpp.js"></script>

保存したディレクトリまで相対パスは適宜変更。スタイルシートの「shCore.css」はリンク必須で、同ディレクトリにある他のスタイルシートを適当に組み合わせたら配色を様々に変更できます。

JavaScriptの「shCore.js」はリンク必須。また同ディレクトリにある他のJavaScriptもリンクすることで様々な言語に対応できます。

次のように表示したいコードをpreタグで囲い、クラス属性を「brush:cpp」とします。このクラス名は言語によって変更します。なおHTML中に書き込むので、「<」といった特殊文字は「&lt;」などのように書き換える必要があります。

<pre class="brush:cpp">
#include &lt;iostream&gt;
int main()
{
std::cout &lt;&lt; &quot;Hello World!\n&quot;;
return 0;
}
</pre>

最後にbodyの終了タグ直前に下記コードを追加して完了。

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

これを実際に表示するとこのようになります。

#include <iostream>
int main()
{
std::cout << "Hello World!\n";
return 0;
}

また言語によってどのJavaScriptをインクルードし、preタグのクラスに何を入れるかを次に示します。

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

※
より

こんなに言語知らないです・・・”汗