SyntaxHighlighterの使い方
ソースコードをハイライト表示するSyntaxHighlighter(JavaScriptライブラリ)の使い方です。同様なJSライブラリではGoogle-Code-Prettifyもありますが、このSyntaxHighlighterはやや上級者向けです。初心者の方や転送量を抑えたい方はGoogle-Code-Prettifyをお薦めします。
1.ダウンロード
まずはライブラリをダウンロードします。
http://alexgorbatchev.com/SyntaxHighlighter/
2.環境設定
自分のWEB、ブログなどの環境へダウンロードした「syntaxhighlighter_xxx」をアップロードします。xxxはバージョン番号です。(例)syntaxhighlighter_3.0.83
3.HTMLからライブラリを読み込む
ここでは8行目～11行目が読み込み処理となります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="./css/common.css" type="text/css" /> <link type="text/css" rel="stylesheet" href="./syntaxhighlighter_3.0.83/styles/shCoreDefault.css" /> <script type="text/javascript" src="./syntaxhighlighter_3.0.83/scripts/shCore.js"></script> <script type="text/javascript" src="./syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script> </head> <body> </body> </html>
08行目 shCoreDefault.css
必須(CSS)
09行目 shCore.js
必須(JS)
10行目 shBrushXml.js
任意(ここに使用したい言語のFile nameを記述する)
11行目 SyntaxHighlighter.all();
必須(ライブラリの実行)
4.ソースコードをハイライトする
ハイライトするにはpreタグでソースコードを括りclass名を指定します。brush:xml;はXML文書(xml, xhtml, xslt, html, xhtml)としてハイライト表示するという意味です。
<pre class="brush:xml;"> <html> <body> ... </body> </html> </pre>
他の言語をハイライトする
上記のサンプルではXML文書をハイライト表示するものです。
他の言語をハイライト表示するには任意の言語のJSファイル(File name)を指定する必要があります。その次にpreタグのクラス名(Brush aliases)を指定すればOKです。
| Brush name | Brush aliases | File name |
|---|---|---|
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
※上記以外の言語にも対応していますので詳しくは公式ページをご覧下さい。
行数を指定して強調表示
「highlight:[2,3,5]」を挿入すると2,3,5行目が強調表示されます。
<pre class="brush:xml;highlight:[2,3,5];"> </pre>
注意事項
このブログではソースコードのハイライトは「Google-Code-Prettify」を使用しています。Google-Code-Prettifyの使用方法はこちらからどうぞ :-)
関連記事
| 前の記事： | Google-Code-Prettifyの使い方 |
| 次の記事： | highlight.jsの使い方 |
