JavaScriptテックラボ

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

2009年8月19日


ブログなどでソースコードを公開する際、簡単に見栄えを良くすることができる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のサポートしているプログラム言語は以下の通りです。

言語表記一覧
言語名言語の別名ファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.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;
}
参考サイト

関連記事

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。