SyntaxHighlighter


[Home]

設置 (Installation)

SyntaxHighlighterは次のように設置します。

  1. 基本ファイルを追加する: shCore.js
  2. ブラシファイル(言語依存)を追加する: JavaScriptならshBrushJScript.jsなど。
  3. CSSファイルを追加する: shCore.css および shThemeDefault.css
  4. 下のようなコードスニペットを追加する。
  5. SyntaxHighlighter.all() を呼び出す。

<!-- 必要なJSファイル shCore.js を呼び出せるようにする。 -->
<script type="text/javascript" src="js/shCore.js"></script>

<!-- 最低ひとつのブラシファイルを含める。下の例は JavaScript の場合。-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>

<!-- 少なくともコアスタイルとデフォルトのテーマを含める。-->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

<!-- ハイライトしたいコードを含める。場所はここでなくても構わない。-->
<pre class="brush: js">
function foo()
{
}
</pre>

<!-- 最後に、ハイライトするためのメソッドを呼び出す。-->
<script type="text/javascript">
  SyntaxHighlighter.all()
</script>

<pre />タグの代わりに<script />タグと<![CDATA[ ]] />を使ってコードをハイライトすることもできます。ただし、RSSを使う場合とコード内に</script>を含む場合(たとえCDATA内でも)、正常に動作しないので注意が必要です。

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
     if (counter <= 10)
        return;
     // it works!
  }
]]></script>

構成 (Configuration)

SyntaxHighlighter.config

SyntaxHighlighter.configファイルは、ハイライトされた要素に共通な設定値を保持しています。

名前説明
bloggerModefalseもし、blogger.comを使っている(ホスティングしている)場合、これを true にする必要がある。
stringsObjectデフォルトのメッセージを変更する。
stripBrsfalse使用するソフトウェアが、行の最後に<br />を自動的に追加する場合、このオプションで無効化できる。
tagName"pre"pre以外のタグを使えるようにする。

使用例

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

SyntaxHighlighter.defaults

SyntaxHighlighter.defaults はハイライトされる要素の規定値を保持している。これらのオプションはハイライトする要素に対してローカルであり、下のように個別に変更できます。

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
....
SyntaxHighlighter.all();

次の表は SyntaxHighlighter.defaults の項目の一覧です。

名前説明
auto-linktrueハイライトされた要素のリンクの検索をオン・オフできる。このオプションをオフにすると、URLはクリックできなくなる。
class-name''ハイライト要素に対してカスタムクラス(または多重クラス)を追加できる。
collapsefalseハイライトされた要素を折りたたんで表示する。
first-line1先頭行を変更する。
guttertrue行番号横に「側溝」(ガーター)を表示するかどうかを指定する。
highlightnullユーザの注意を引くための行をハイライトする。
html-scriptfalseHTML内のスクリプトのハイライトを行う。この機能を使うには、shBrushXml.js が必要である。
smart-tabstrueスタートタブを使う。
tab-size4タブの幅を指定する。
toolbartrueツールバーをオン・オフする。

動的なブラシのロード

バージョン3では動的にブラシのロードができるようになりました。

<script src="shCore.js" type="text/javascript"></script>
<script src="shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
  SyntaxHighlighter.autoloader(
    'js jscript javascript  /js/shBrushJScript.js',
    'applescript            /js/shBrushAppleScript.js'
  );

  SyntaxHighlighter.all();
</script>

 

サンプル

JavaScript

1
2
3
var fs = require('fs');
var express = require('express');
var router = express.Router();

 

トラブルシュート

FireBugなどを使うとよい。