ソースコードをハイライト表示する「SyntaxHighlighter」

Check このエントリーをはてなブックマークに追加

ソースコードをハイライト表示する「SyntaxHighlighter」

配布元:SyntaxHighlighter – Alex Gorbatchev
ライセンス:LGPL 3

SyntaxHighlighterはソースコードを簡単にハイライト表示することが可能なJavaScriptライブラリです。
JavaScriptやHTML、CSS、PHP、Python、Rubyなど様々な言語のシンタックスハイライトが可能です。

利用方法

配布元よりダウンロードしたSyntaxHighlighter.cssとshThemeDefault.css、shCore.jsをhead要素内で読み込みます。

<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script type="text/javascript" src="scripts/shCore.js"></script>

shThemeDefault.cssを他のテーマに変更することでハイライトのデザインを変更することも可能です。

次に利用したい言語に合わせて専用のJavaScriptファイルを読み込みます。
CSSで利用したい場合はhBrushCss.jsを、JavaScriptで利用したい場合はshBrushJScript.jsを、HTMLで利用したい場合はshBrushXml.jsをといった感じです(詳しくは最後の表を参照してください)。

<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

次にJavaScriptで設定を行います。

ClipboardSwf ではクリップボード保存用のswf(デフォルトではscriptsフォルダの中)の場所を設定できます。

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();

シンタックスハイライトは次のようにpre要素に対して先ほど設定したclass属性に利用する言語の種類を設定することで利用できます。

<pre  class="brush: css;">*{
	font-size:12px;
}</pre>

サンプル

言語 クラス名 読み込むファイル名
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.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
Erlang erl, erlang shBrushErlang.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

スポンサードリンク

コメント

カテゴリー:コード配色 ライブラリ