SyntaxHighlighter を使ってみる(使い方編) JavaScript »

SyntaxHighlighter を使ってみる(導入編) JavaScript

「とにかくなんでもやってみる」の最初の記事は「SyntaxHighlighterを使ってみる(導入編)」です。
SyntaxHighlighterは行番号のついたソースコードを表示してくれるJavascriptライブラリで、言語ごとに見やすく色分け表示してくれる便利なライブラリです。

  1. どんなことができるか
  2. ファイルのダウンロード
  3. ファイルをサーバに設置
  4. SyntaxHighlighterのライブラリを読み込む
  5. ソースコードを記述する

どんなことができるか

まずはどんな風に表示されるのか見てみましょう。

最初に<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」をクリック
SyntaxHighlighterサイト

「Click here to download.」をクリックするとダウンロードが始まります
SyntaxHighlighterダウンロード画面

今回2010年10月時点での最新版「SyntaxHighlighter 3.0.83」をダウンロードしました。

ファイルをサーバに設置

ダウンロードしたファイルを解凍すると以下のファイルが入っているので、この中の「scripts」フォルダと「styles」フォルダをサーバの任意の場所にアップロードします。

SyntaxHighlighterフォルダの中身

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

最後に導入までの手順をおさらい

  1. ファイルのダウンロード
  2. ファイルをサーバに設置
  3. SyntaxHighlighterのライブラリを読み込む
  4. ソースコードを記述する

今回は導入編でした。こんな素敵なライブラリをオープンソースで公開している「http://alexgorbatchev.com/」に感謝です。次回は「SyntaxHighlighter を使ってみる(使い方編)」を書こうと思います。