記事一覧 | SyntaxHighlighter を使ってみる(使い方編) »

2010年10月23日

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

「とにかくなんでもやってみる」の最初の記事は「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);
    }
}

導入までの手順

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

ファイルのダウンロード

まずは「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ファイル
ActionScript3shBrushAS3.js
Bash/shellshBrushBash.js
ColdFusionshBrushColdFusion.js
C#shBrushCSharp.js
C++shBrushCpp.js
CSSshBrushCss.js
DelphishBrushDelphi.js
DiffshBrushDiff.js
ErlangshBrushErlang.js
GroovyshBrushGroovy.js
JavaScriptshBrushJScript.js
JavashBrushJava.js
JavaFXshBrushJavaFX.js
PerlshBrushPerl.js
PHPshBrushPhp.js
Plain TextshBrushPlain.js
PowerShellshBrushPowerShell.js
PythonshBrushPython.js
RubyshBrushRuby.js
ScalashBrushScala.js
SQLshBrushSql.js
Visual BasicshBrushVb.js
XML, HTMLshBrushXml.js

ソースコードを記述する

ソースコードを記述する際は<pre>タグを使って記述し、「class="brush:言語"」を追加します。下記の例ではCSSを記述しているので「class="brush:css"」と記述しています。

<pre class="brush:css">#header-description {
    color:#AAAAAA;
}
</pre>

「class="brush:言語"」の言語部分は下記の表から対応するキーワードを選んで指定します。

対応する言語記述するキーワード
ActionScript3as3, actionscript3
Bash/shellbash, shell
ColdFusioncf, coldfusion
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Erlangerl, erlang
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

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

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

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

トラックバック(0)

トラックバックURL: http://ingwer-design.com/labmt/mt-tb.cgi/5

コメントする