CentOS サーバー構築 SyntaxHighlighter

(最終更新日時:2013-03-30 02:51:27)
ウェブ上でソースコードを表示させる際に、キーワードに色(ハイライト)や行番号を付けて見やすくする JavaScriptツール SyntaxHighlighter を導入します。
SyntaxHighlighterには、Ver 1.x系、Ver 2.x系、Ver 3.x系があるのですが、当サイトでは Ver 3.x系を導入することにしました。

ダウンロード

SyntaxHighlighterの公式サイト (http://alexgorbatchev.com/SyntaxHighlighter/) から次のファイルをダウンロードします。
latest SyntaxHighlighter version is 3.0.83syntaxhighlighter_3.0.83.zip
 (※)下線部は 2013/03/28 現在の最新バージョンです。

インストール

/usr/local/srcディレクトリでアーカイブを展開し、ウェブサイトディレクトリにファイルをコピーします。
# アーカイブを展開します
$ cd /usr/local/src
$ unzip [ダウンロード先]/syntaxhighlighter_3.0.83.zip

# 導入するウェブサイトに SyntaxHighlighter用のディレクトリを作成し、ファイルをコピーします
$ sudo mkdir -p /home/www/vhosts/system-act.com/www/css/sh
$ sudo mkdir -p /home/www/vhosts/system-act.com/www/scripts/sh
$ cd syntaxhighlighter_3.0.83
$ sudo cp -R styles/*  /home/www/vhosts/system-act.com/www/css/sh/
$ sudo cp -R scripts/* /home/www/vhosts/system-act.com/www/scripts/sh/

# ディレクトリ/ファイルのオーナーとパーミッションを設定します
$ cd /home/www/vhosts/system-act.com/www
$ sudo chown -R apache.apache css/sh
$ sudo find css/sh -type d -exec chmod 757 {} \;
$ sudo find css/sh -type f -exec chmod 644 {} \;
$ sudo chown -R apache.apache scripts/sh
$ sudo find scripts/sh -type d -exec chmod 757 {} \;
$ sudo find scripts/sh -type f -exec chmod 644 {} \;

SyntaxHighlighterの定義

SyntaxHighlighterを使用するには、ソースコードを表示させる HTMLファイルの HEAD部でスタイルシートを定義し、BODY部の最後でスクリプトファイルを読み込ませます。
HEAD部のスタイルシートは、Default以外に Emacs風、Eclipse風等が用意されていますので好みで変えてください。
各言語用のハイライト定義ファイル(shBrushXXXX.js)は、Ver 3.x系でサポートされたをオートロード機能を使用して読み込むようにしています。

使用法

SyntaxHighlighterでソースコードを表示させるには、以下のように pre または script で表示させたいソースコードを囲みます。
HTMLソースを表示させる場合は、scriptタグで囲むようにすると HTMLの <&lt; に置き換えることなく表示することができます。
※ただし、</script>タグと ]]> は、それぞれ &lt;/script>]]&gt; に置き換える必要があります。

<pre class="brush: xxxx;">
     :
</pre>

<script type="syntaxhighlighter" class="brush: xxxx;"><![CDATA[
     :
]]></script>
    
下線部分には、表示させるソースコードの言語に対応した以下の brush名を指定します。
言語brush名定義ファイル
ActionScript3as3, actionscript3shBrushAS3.js
Bash/Shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

表示カスタマイズ

当サイトでは、デフォルトの表示設定から以下のカスタマイズを行っています。
  1. 枠線を表示する ... solid 1px #228B22
  2. 横サイズを少しだけ縮める ... 99%
  3. 上下の枠線との間隔を広げる ... 3px
  4. タイトルの背景色を変更する ... #228B22
  5. タイトル文字の上下左右の空白を変更する ... 2px 4px
  6. タイトルを表示した際の上下の空白を調整する ... -3px 0 3px 0

表示カスタマイズは、SyntaxHighlighterのバージョンアップを考慮し、SyntaxHighlighterの CSSファイルを直接変更するのではなく、カスタマイズ用の CSSファイルを作成し、SyntaxHighlighterの CSSファイルの直後に読み込ませるようにしています。
.syntaxhighlighter {
  border: solid 1px #228B22 !important;     /* ForestGreen */
  width: 99% !important;
  padding: 3px 0 !important;
}

.syntaxhighlighter table caption {
  color: #FFFFFF !important;
  background-color: #228B22 !important;
  padding: 2px 4px !important;
  margin: -3px 0 3px 0 !important;
}
    
上記の内容でカスタマイズ用のCSSファイルを作成し、ソースコードを表示させる HTMLファイルの HEAD部に追加します。

フィードバック

記事の内容についてのご質問、ご指摘、その他ご意見等は、下記にてお願いいたします。

System House ACT公式ブログ内記事 : CentOS サーバー構築 SyntaxHighlighter

トラックバックまたはコメントにてお寄せください。

Clip to Evernote
a System House to build an Accounting system by the Computer Technology