行番号の表示/非表示などのオプション設定

広告

SyntaxHighlighterでは行番号の表示の有無や特定の行のハイライト表示などいくつかの設定項目に関して設定を変更することができます。ここではオプションの設定方法について解説します。

1.設定方法
2.行番号を非表示(gutter)
3.行番号の開始番号を指定(first-line)
4.指定の行をハイライト表示(highlight)
5.URLに自動でリンクを設定しない(auto-links)
6.ツールバーを非表示(toolbar)
7.ソースコードを折りたたみ表示(collapse)
8.HTML/XMLの構文も合わせてハイライト表示(html-script)

設定変更を行う場合は「SyntaxHighlighter.all()」を実行する前に変更を行いたい項目に対して値を設定します。この方法で記述した場合、同じページ内にあるソースコード全てに設定変更が適用されます。

<script type="text/javascript">
  SyntaxHighlighter.defaults['項目1'] = 値1;
  SyntaxHighlighter.defaults['項目2'] = 値2;
  ...
  SyntaxHighlighter.all();
</script>

特定のソースコードだけ設定変更を行いたい場合は、pre要素またはscript要素のクラス名に必須の項目である「brush:言語名」に加えて設定変更を行いたい項目を追加で記述します。

<pre class="brush:java ; 項目1:値1 ; 項目2:値2">
・・・
</pre>

目的に応じて使い分けて下さい。

行番号をデフォルトでは表示されるようになっています。非表示にするには項目名「gutter」に「false」を設定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['gutter'] = false;
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; gutter:false">
・・・
</pre>

行番号を非表示にした場合、次のように表示されます。

[変更前]

p7-1

[変更後]

p7-2

行番号を表示している場合、デフォルトでは最初の行が1から始まっています。任意の番号から始まるように指定するには項目名「first-line」に行を表す数値で設定します。次のいずれかの方法で設定して下さい。(下記は7から始まる場合です)。

<script type="text/javascript">
  SyntaxHighlighter.defaults['first-line'] = 7;
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; first-line:7">
・・・
</pre>

行番号の開始番号を指定した場合、次のように表示されます。

[変更前]

p7-1

[変更後]

p7-3

指定した行を強調するためにハイライト表示します。行は複数指定できますが1つ1つ指定する必要があります。指定するには項目名「highlight」に行を表す数値または複数の行の数値を配列で指定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['highlight'] = 4;
  SyntaxHighlighter.all();
</script>
<script type="text/javascript">
  SyntaxHighlighter.defaults['highlight'] = [1,3,8];
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; highlight:4">
・・・
</pre>
<pre class="brush:java ; highlight:[1,3,8]">
・・・
</pre>

4行目、8行目、12行目をハイライト表示を指定した場合、次のように表示されます。

[変更前]

p7-1

[変更後]

p7-4

ソースコードの中にURLが含まれていた場合、デフォルトでは自動的にリンクを設定する場合があります。自動でリンクを設定しないようにするには項目名「auto-links」にfalseを設定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; auto-links:false">
・・・
</pre>

自動でリンクが設定される場合とされない場合は、それぞれ次のように表示されます。('http://www.example.com/'のところにリンクが設定されています)。

[変更前]

p7-5

[変更後]

p7-6

SyntaxHighlighterを使ってソースコードを表示した場合、デフォルトの設定では画面右上にツールバーが表示されます。(画面右上にある緑色のはてな(?)アイコンのことです)。

p7-7

ツールバーを表示しないようにするには項目名「toolbar」にfalseを設定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; toolbar:false">
・・・
</pre>

ツールバーを非表示にした場合、次のように表示されます。

[変更前]

p7-1

[変更後]

p7-8

最初はソースコードを折りたたんで隠しておき、画面に表示された「expand source」などのメッセージをクリックするとソースコードが表示されるようにすることができます。折りたたみ表示を有効にするには項目名「collapse」にtrueを設定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['collapse'] = true;
  SyntaxHighlighter.all();
</script>
<pre class="brush:java ; collapse:true">
・・・
</pre>

折りたたみ表示を有効にした場合、次のようにソースコードは表示されず、代わりに「expand source」と書かれたリンクが表示されます。

p7-9

「expand source」をクリックするとソースコードが表示されます。

p7-10

-- --

折りたたんだ時に表示されるテキストを「expand source」から変更したい場合は次のように設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.config.strings.expandSource = "msg";
  SyntaxHighlighter.all();
</script>

例として次のように設定してみました。

<script type="text/javascript">
  SyntaxHighlighter.config.strings.expandSource = "ソースコード表示";
  SyntaxHighlighter.all();
</script>

次のように表示されます。

p7-11

-- --

またpre要素やscript要素でtitle属性を設定すると、設定したtitle属性の値が代わりに表示されます。

<pre class="brush:java ; collapse:true" title="msg">
・・・
</pre>

例として次のように設定してみました。

<pre class="brush:java ; collapse:true" title="Sample.java">
・・・
</pre>

次のように表示されます。

p7-12

title属性を設定した場合は最優先で使用されます。またクリックしてソースコードを表示した後もソースコードの上部にタイトルとして表示されます。

p7-13

PHPなどのようにHTMLページの中で記述されたソースコードの場合、PHPだけをハイライト表示するのではなくHTMLの構文も合わせてハイライト表示させることができます。変更するには項目名「html-script」にtrueを設定します。次のいずれかの方法で設定して下さい。

<script type="text/javascript">
  SyntaxHighlighter.defaults['html-script'] = true;
  SyntaxHighlighter.all();
</script>
<pre class="brush:php ; html-script:true">
・・・
</pre>

この設定を行う場合は「shBrushXml.js」ファイルも忘れずに読み込んで下さい。

HTML構文も合わせてハイライト表示するようにした場合、次のように表示されます。

[変更前]

p7-14

[変更後]

p7-15

-- --

設定可能なオプションについて解説しました。

( Written by Tatsuo Ikura+ )