ブログなどでソースコードを公開する際、簡単に見栄えを良くすることができるSyntaxHighlighterをご紹介します。SyntaxHighlighterは見栄えだけではなく、印刷やクリップボード、ソース表示などの機能も付いています。
Yahoo! UI Library: Grids CSSでも利用されているので、ご存知の方も多いかもしれませんね。
dp.SyntaxHighlighterの特徴
- プログラム毎に任意の文字色で表示することができます。
- 表示するソースコードに行番号を付加することができます。
- 対応ブラウザであれば、[copy to clipboard]のリンクが表示されて、対象のコードをコピーできます。
- [view plain]をクリックすると、別画面でシンプルなコードを表示することができます。
- [print]をクリックすると、対象のコードを印刷することができます。
- JavaScriptオフの状態では、テキストエリアにコードが表示されます。
SyntaxHighlighterの導入
下記サイトからファイルをダウンロードして解凍します。
解凍したフォルダとファイルを任意の場所に設置します。今回はjsフォルダに設置します。
次に、必要なJavaScriptファイルを読み込みます。shCore.css、shThemeDefault.cssが必須で、そのほか整形したいプログラム毎に追加して読み込みます。たとえば、JavaScriptのコードを整形したい場合はshBrushJScript.js、スタイルシートを整形したい場合はshBrushCss.jsを読み込みます。
コードはPRE要素の中に記述し、class名にはbrush:の次にJavaScriptであれば下記の用に指定します。
<pre class="brush: javascript;">
function(VAL){
alert("test..");
}
</pre>
dp.SyntaxHighlighterのサポートしているプログラム言語は以下の通りです。
言語表記一覧
| 言語名 | 言語の別名 | ファイル名 |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
SyntaxHighlighterのスタイル設定は行の高さや文字の大きさがタイトなので、下記のように変更しても良いでしょう。変更する際は、SyntaxHighlighterのCSSを直接変更せずに、他の外部CSSなどに記述しておきます。
/* syntaxhighlighter */
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
/* 行の高さを変更 */
line-height: 1.5em !important;
}
/* コードの表示領域、フォントサイズをサイトに合った大きさに変更 */
.syntaxhighlighter{
margin-left: auto !important;
margin-right: auto !important;
width: 93% !important;
font-size: 123.1% !important;
}
/* 改行画像の削除 */
.syntaxhighlighter .line .content .block{
background-image: url("") !important;
}