SyntaxHighlighterの使い方

さまざまなサイトで紹介されているのでいまさらですが、すぐに使い方を忘れてしまうのでブログの趣旨通り備忘録として記録しておきます。

準備

まずはHTMLのヘッダに次のような一文を追加します。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

例の場合、bash、C++、Java、XMLのコードに対応できます。

使用方法

コード表示にしたいところを<pre>タグで囲います。あとはclass属性で”brush: ○○;"と定義するとそれぞれのコードに最適化された表示になります。

使用例

<pre class="brush: java; tab-size: 4;">
class A {
  private int a;
  public A(int a) {
    this.a = a;
  }
};
</pre>

class A {
  private int a;
  public A(int a) {
    this.a = a;
  }
};

参考資料 

ソースコード表示