ブログにソースコードを貼り付けてハイライト表示にする方法

今回は、以下のようにソースコードを構文ごとにハイライト表示する方法をご紹介します。
表示に使用するライブラリはSyntaxHighlighterというもので、これを導入すればpreタグに囲まれたソースコードを、以下のようなハイライト表示にしてくれます。

<script type="text/javascript">
$(function(){
    var text = $('#comment').text();

    text = text.replace(/ +/, '');
    alert(text);
});
</script>

では以下に導入手順を書きます。
（作者様がスクリプトファイルのホスティングまでされているので、これを利用させていただきます）

Contents

1 SyntaxHighlighter導入手順
- 1.1 CSS・コアスクリプト読込追加
- 1.2 言語ごとのスクリプト読込追加
2 使用方法
3 さいごに

SyntaxHighlighter導入手順

CSS・コアスクリプト読込追加

HTMLの<HEAD>タグ内に、SyntaxHighlighterスタイルシートのリンクを挿入する。
同<HEAD>タグ内に、SyntaxHighlighterのコアJavaScriptファイルを追加する。

<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css"/>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>

上のタグを<HEAD>タグ内に挿入してください。
また、スタイルに応じて１行目のスタイルシートファイルの名前（shCoreEclipse.css）を変更してください。

スタイルシートのファイル名は以下の表を参考にしてください。

ファイル名	表示例
shCoreDefault.css
shCoreDjango.css
shCoreEclipse.css
shCoreEmacs.css
shCoreFadeToGrey.css
shCoreMDUltra.css
shCoreMidnight.css
shCoreRDark.css

言語ごとのスクリプト読込追加

CSS・コアスクリプト読込追加で追加したタグの直下に、ソースコード言語ごとのJavaScriptライブラリ読み込みを追加する。

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>

上のタグを導入手順１で追加したタグの直下に挿入してください。
※使用する言語が複数の場合、言語分複数行追加する必要があります。
表示したいソースコードの言語ごとに、jsファイルのファイル名（shBrushXml.js）を以下のように変更してください。

・言語ごとのjsファイル名

言語	ファイル名	言語	ファイル名	言語	ファイル名
AppleScript	shBrushAppleScript.js	ActionScript3	shBrushAS3.js	Bash	shBrushBash.js
ColdFusion	shBrushColdFusion.js	C C++	shBrushCpp.js	C#	shBrushCSharp.js
CSS	shBrushCss.js	Delphi Pascal	shBrushDelphi.js	差分ファイル	shBrushDiff.js
Erlang	shBrushErlang.js	Groovy	shBrushGroovy.js	Java	shBrushJava.js
JavaFX	shBrushJavaFX.js	JavaScript	shBrushJScript.js	Perl	shBrushPerl.js
PHP	shBrushPhp.js	テキスト	shBrushPlain.js	PowerShell	shBrushPowerShell.js
Python	shBrushPython.js	Ruby	shBrushRuby.js	Sass	shBrushSass.js
VisualBasic	shBrushVb.js	SQL	shBrushSql.js	Scala	shBrushScala.js
HTML XML	shBrushXml.js

ライブラリ読み込みの追加が終わったら、直下に以下のコードを追加してください。
（このコードで、整形処理を実行しているので、これが抜けると動きません）

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

使用方法

実際にブログなどに貼り付けたいソースコードを、以下のように<pre>タグで囲ってください。
<pre>タグのclass値（brush:javascript）をソースコードに応じて変更します。

<pre class="brush:html">
<script type="text/javascript">
$(function(){
    var text = $('#comment').text();

    text = text.replace(/ +/, '');
    alert(text);
});
</script>
</pre>

<pre>タグのclass値については、以下の表を参考にしてください。

言語	class値	言語	class値	言語	class値
AppleScript	brush:applescript	ActionScript3	brush:as3	Bash	brush:bash
ColdFusion	brush:cf	C C++	brush:c brush:cpp	C#	brush:c#
CSS	brush:css	Delphi Pascal	brush:delphi brush:pascal	差分ファイル	brush:diff
Erlang	brush:erl	Groovy	brush:groovy	Java	brush:java
JavaFX	brush:jfx	JavaScript	brush:js	Perl	brush:perl
PHP	brush:php	テキスト	brush:text	PowerShell	brush:ps
Python	brush:py	Ruby	brush:ruby	Sass	brush:sass
VisualBasic	brush:vb	SQL	brush:sql	Scala	brush:scala
HTML XML	brush:html brush:xml