JavaScript

SyntaxHighlighter 2.0 -ソースコードを素敵に表示する

ブログなどでソースコードを公開する際、簡単に見栄えを良くすることができるSyntaxHighlighterをご紹介します。SyntaxHighlighterは見栄えだけではなく、印刷やクリップボード、ソース表示などの機能も付いています。
Yahoo! UI Library: Grids CSSでも利用されているので、ご存知の方も多いかもしれませんね。

dp.SyntaxHighlighterの特徴

  • プログラム毎に任意の文字色で表示することができます。
  • 表示するソースコードに行番号を付加することができます。
  • 対応ブラウザであれば、[copy to clipboard]のリンクが表示されて、対象のコードをコピーできます。
  • [view plain]をクリックすると、別画面でシンプルなコードを表示することができます。
  • [print]をクリックすると、対象のコードを印刷することができます。
  • JavaScriptオフの状態では、テキストエリアにコードが表示されます。

SyntaxHighlighterの導入

下記サイトからファイルをダウンロードして解凍します。

SyntaxHighlighter 2.0

解凍したフォルダとファイルを任意の場所に設置します。今回は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;
}
参考サイト

関連記事