本ブログにSyntaxHighlighterを適用しました。

タイトルにあるように、本ブログにSyntaxHighlighterを適用しました。

適用したSyntaxHighlighter
SyntaxHighlighter 3.0.83
http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter(シンタックスハイライト)

SyntaxHighlighter(シンタックスハイライト)とは、ウィキペディアから引用すると・・

SyntaxHighlighter(シンタックスハイライト)とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。

とまーありますが、よく他のブログでも見られるものです。

こうすることにより、ソースコードが見やすくなります。

早速、適用したので、効果のほどは以下のサンプルソースの通りです。

function helloWold(){
	alert("Hello,World!");
}

このSyntaxHighlighterの設置方法は、必要ファイルをダウンロードして、下記のように必要ファイルをサーバにアップロードして、head要素の範囲以内に設置します。

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

あとは、下記のようにclass属性で指定するだけです。

<pre class="brush: js;">
<!-- ここにソースコード -->
</pre>

これだけだとJavaScriptのソースコードのみになりますので、HTMLやCSSを適用させるためには、shBrushXml.jsとshBrushCss.jsが必要になりますので、これらのファイルの記述もhead要素に設置します。

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

こうすることにより、brush:の後に続くBrush aliasesにhtmlやcssが使えるようになります。

<pre class="brush: html;">
<!-- ここにソースコード -->
</pre>
<pre class="brush: css;">
<!-- ここにソースコード -->
</pre>

brush:の後のBrush aliasesは、 ここを参考