ソースコード表示
SyntaxHighlighter
ソースコードを綺麗に表示する方法を紹介します。
もちろん自前で整形することも可能ですが、「Syntax Highlighter」を使うことで簡単に実現できます。
ダウンロード
下記サイトから「SyntaxHighlighter」をダウンロードします。
準備
解凍するといくつかのファイルがありますが、必要なのは以下のフォルダに入ったファイルのみです。
- scripts
- styles
これらのファイルを任意の場所に配置します。
使い方
HTMLのヘッダー部に先ほどのjavascriptとスタイルシートを組み込みます。
<script type="text/javascript" src="javascript配置先/shCore.js"></script>
<script type="text/javascript" src="javascript配置先/言語別javascriptファイル"></script>
<link type="text/css" rel="stylesheet" href="スタイルシート配置先/shCore.css"/>
<link type="text/css" rel="stylesheet" href="スタイルシート配置先/shThemeDefault.css"/>
<script type="text/javascript">
window.onload = function () {
SyntaxHighlighter.config.clipboardSwf = 'javascript配置先/clipboard.swf';
SyntaxHighlighter.all();
}
</script>
上記の「javascript配置先」および「スタイルシート配置先」には解凍ファイルを配置したディレクトリへのパスを指定します。
また、「言語別javascriptファイル」にはHTML内で使用する言語に応じたファイルを指定します。 言語とファイルの対応については以下の表を参照してください。
| 言語 | ファイル |
|---|---|
| C++ | shBrushCpp.js |
| C# | shBrushCSharp.js |
| CSS | shBrushCss.js |
| Delphi | shBrushDelphi.js |
| Java | shBrushJava.js |
| JavaScript | shBrushJScript.js |
| PHP | shBrushPhp.js |
| Python | shBrushPython.js |
| Ruby | shBrushRuby.js |
| Sql | shBrushSql.js |
| VB | shBrushVb.js |
| XML/HTML | shBrushXml.js |
尚、複数の言語を表示させる場合は、使用する言語分だけファイルを組み込むようにします。
あとはソースコードを以下のように<pre>タグで囲めば自動整形してくれます。
HTMLファイル
<pre class="brush: c;">
void Func()
{
return;
}
</pre>
表示結果
void Func()
{
return;
}