ちゃんと説明を読まずにSyntaxHighlighterを導入して、ページにエラーを発生させて無駄に原因究明に時間がかかった話

ブログなどのWebページにソースコードを載せる場合に読みやすいように形を整えてくれる「SyntaxHighlighter」というものがあります。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/


私も別記事「実験：CPU使用率の取得 - CPU使用率コントローラー」にてC#のソースコードをブログに張り付けようと思い、SyntaxHighlighter を導入したのですが、ちゃんと説明を読まずに導入したために無駄に時間を喰ってしまった話をします。



細かい部分は参考文献に任せるのですが、ブログにソースコードを張り付ける際に、ソースコードを以下のタグで囲むようにという説明がありました。

<pre class="brush: alias;">
// ソース
</pre>


これをそっくりそのまま使用して、間にソースコードを記載したところ、ページを開いたら以下のようなエラーが発生してしまいました。

SyntaxHighlighter

Can't find brush for : alias

いろいろと無駄に調べて時間を費やしたのですが、何のことはない、<pre class="brush: alias;">のalias の部分にソースコードの言語を書かないといけないのですね。

C# の場合は、alias の部分に c-sharp または csharp を指定します。

<pre class="brush: csharp;">
// C#のソース
</pre>


各言語ごとの alias の部分に記載する文字列は、一覧以下のページに記載されています。

SyntaxHighlighter - C# Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/csharp.html


というわけで、無事 SyntaxHighlighter できれいにソースコードを表示できるようになりました。

めでたし、めでたし。

参考文献

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する|DevAchieve
http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす|DevAchieve
http://wada811.blogspot.com/2012/02/syntaxhighlighter30.html

ソースコードをきれいに表示してくれるSyntaxHighlighterをBloggerにウィジェットで導入&#65281; | LIFE GOES TO A PARTY
http://www.life-gp.net/2013/08/syntaxhighlighterblogger.html

Syntax Highlighter Scripts Generator
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator