SyntaxHighlighter を使ってみる（導入編） JavaScript
「とにかくなんでもやってみる」の最初の記事は「SyntaxHighlighterを使ってみる（導入編）」です。
SyntaxHighlighterは行番号のついたソースコードを表示してくれるJavascriptライブラリで、言語ごとに見やすく色分け表示してくれる便利なライブラリです。
どんなことができるか
まずはどんな風に表示されるのか見てみましょう。
最初に<pre>タグを使って通常のHTMLソースコード表示
<h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p>
次はSyntaxHighlighterを使ってHTMLのソースコード表示
<h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p>
SyntaxHighlighterを使うと要素や属性値などのキーワードが色分けされて見やすい。HTML以外の言語にも対応しており、下記のように各言語のキーワードが色分け表示されます。
同様に通常の<pre>タグを使ってCSSのソースコード表示
#header-description {
color:#AAAAAA;
}
SyntaxHighlighterを使ってCSSのソースコード表示
#header-description {
color:#AAAAAA;
}
通常の<pre>タグを使ってJavaのソースコード表示
class Test {
public static void main(String args[]){
int i = 5;
System.out.println(i + 100);
}
}
SyntaxHighlighterを使ってJavaのソースコード表示
class Test {
public static void main(String args[]){
int i = 5;
System.out.println(i + 100);
}
}
ファイルのダウンロード
まずは「SyntaxHighlighter」を http://alexgorbatchev.com/SyntaxHighlighter/ からダウンロードします。
右メニューの「download」をクリック
「Click here to download.」をクリックするとダウンロードが始まります
今回2010年10月時点での最新版「SyntaxHighlighter 3.0.83」をダウンロードしました。
ファイルをサーバに設置
ダウンロードしたファイルを解凍すると以下のファイルが入っているので、この中の「scripts」フォルダと「styles」フォルダをサーバの任意の場所にアップロードします。
SyntaxHighlighterのライブラリを読み込む
SyntaxHighlighterを使いたいHTMLファイルの<head>部分にライブラリ読み込みの記述を追加する
「http://-YourServer-/」部分を自分のサーバ名に置き換えてください。
今回は絶対パスで指定しましたが、相対パスで指定してももちろんOK。
<script type="text/javascript" src="http://-YourServer-/scripts/shCore.js" charset="Shift_JIS"></script> <script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script> <link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shCore.css" /> <link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeDefault.css" /> <script type="text/javascript"> SyntaxHighlighter.all(); </script>
上の例ではCSSとPHPのソースコードをSyntaxHighlighterで表示させることにしています。
では、どの部分でその指定をしているか見てみましょう
<script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script>
4行目で「shBrushCss.js」を読み込みCSSの表記を、同様に5行目で「shBrushPhp.js」を読み込むことでPHPの表記に対応させています。
「shBrushCss.js」や「shBrushPhp.js」は、さきほどアップロードした「scripts」フォルダの中に入っており、CSSやPHP以外にも各言語に対応したjsファイルが入っているので適宜読み込みます。
尚、対応している言語と読み込みjsファイルの対応表は下記のとおり。
| 対応言語 | 読み込むjsファイル |
|---|---|
| ActionScript3 | shBrushAS3.js |
| Bash/shell | shBrushBash.js |
| ColdFusion | shBrushColdFusion.js |
| C# | shBrushCSharp.js |
| C++ | shBrushCpp.js |
| CSS | shBrushCss.js |
| Delphi | shBrushDelphi.js |
| Diff | shBrushDiff.js |
| Erlang | shBrushErlang.js |
| Groovy | shBrushGroovy.js |
| JavaScript | shBrushJScript.js |
| Java | shBrushJava.js |
| JavaFX | shBrushJavaFX.js |
| Perl | shBrushPerl.js |
| PHP | shBrushPhp.js |
| Plain Text | shBrushPlain.js |
| PowerShell | shBrushPowerShell.js |
| Python | shBrushPython.js |
| Ruby | shBrushRuby.js |
| Scala | shBrushScala.js |
| SQL | shBrushSql.js |
| Visual Basic | shBrushVb.js |
| XML, HTML | shBrushXml.js |
ソースコードを記述する
ソースコードを記述する際は<pre>タグを使って記述し、「class="brush:言語"」を追加します。下記の例ではCSSを記述しているので「class="brush:css"」と記述しています。
<pre class="brush:css">#header-description {
color:#AAAAAA;
}
</pre>
「class="brush:言語"」の言語部分は下記の表から対応するキーワードを選んで指定します。
| 対応する言語 | 記述するキーワード |
|---|---|
| ActionScript3 | as3, actionscript3 |
| Bash/shell | bash, shell |
| ColdFusion | cf, coldfusion |
| C# | c-sharp, csharp |
| C++ | cpp, c |
| CSS | css |
| Delphi | delphi, pas, pascal |
| Diff | diff, patch |
| Erlang | erl, erlang |
| Groovy | groovy |
| JavaScript | js, jscript, javascript |
| Java | java |
| JavaFX | jfx, javafx |
| Perl | perl, pl |
| PHP | php |
| Plain Text | plain, text |
| PowerShell | ps, powershell |
| Python | py, python |
| Ruby | rails, ror, ruby |
| Scala | scala |
| SQL | sql |
| Visual Basic | vb, vbnet |
| XML | xml, xhtml, xslt, html, xhtml |
最後に導入までの手順をおさらい
今回は導入編でした。こんな素敵なライブラリをオープンソースで公開している「http://alexgorbatchev.com/」に感謝です。次回は「SyntaxHighlighter を使ってみる（使い方編）」を書こうと思います。