ソースコードをハイライト表示する「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 |
スポンサードリンク