Syntaxhighlighter を <pre /> 以外のタグで呼び出す

現在は Syntaxhighlighter を呼び出す方法として <pre /> メソッドを採用しているので、記事投稿に際しては <pre> </pre> のタグを使っています。

tagName というオプションは 、Syntaxhighlighter を呼び出すためのタグの文字列を任意に変更するための機能です。

オプションについては、本家サイトの Configuration ページの項目 SyntaxHighlighter.config に説明があります。

 Configuration

SyntaxHighlighter.config

tagName "pre" Facilitates using a different tag.

(tagName で "pre" と異なるタグを容易に利用できます.)

tagname の機能を使いたい場合は "トップページ", "個別記事", "アーカイブ" のテンプレートに以下の記述を追記します。

  SyntaxHighlighter.config.tagName="syntax";

追加する場所は各テンプレートの SyntaxHighlighter.all(); の直上でよいです。テンプレートのカスタマイズ (トップページ, 個別記事, アーカイブ) で以下の様に追加してください。

    :

    .

<script type="text/javascript">

SyntaxHighlighter.config.stripBrs=true;

SyntaxHighlighter.config.tagName="syntax";

SyntaxHighlighter.all();

</script>

    :

    .

これで <pre> </pre> の代わりに <syntax> </syntax> というオリジナルタグで SyntaxHighlighter の呼び出しが出来る様になります。

<pre /> の利用に差しさわりがある場合は有用ですが、てぃーだブログでは特に必要ありません。なんかかっこいいなと思ったので紹介しました。

Syntaxhighlighter で行指定をしてハイライト表示する

上の例で 5 行目を指定している設定です。この機能の名前は highlight といいます。実際の指定は機能名 + 行番号で行います。

これは本家サイト Configuration ページの項目 SyntaxHighlighter.defaults に説明があります。

SyntaxHighlighter.defaults のオプションはテンプレートを変更する必要がなく <pre /> タグの中で指定するだけで利用出来ます。

5 行目を 1 行のみハイライト

<pre  class="brush: xml; highlight: 5">



1, 3, 5 行目の複数行をハイライト

<pre  class="brush: xml; highlight: [1, 3, 5]">

例えば 3, 6, 9 行目を指定するとこんな感じになります。

 #!/usr/bin/perl



my $count = 0;

my $char  = '';

my $int   = 0;



while ($count <= 1) {



  if ($count == 0) {

    $char = <STDIN>;

  } else {

    $int = <STDIN>;

  }

  $count++;

}



my $ans = $char x $int;

print "$ans\n";

設定する "テーマ" の種類で大きく印象が変わるので色々試すとよいと思います。"テーマ" についは下の方で説明します。

Syntaxhighlighter の表示枠を付ける

これまで見てきた様に Syntaxhighlighter の標準ではコードの表示に境界線 (枠) が付きません。

しかし、人によっては、また、心境によっては、境界がないとなんだかムニャムニャする場合があります。そういう場合は class-name というオプションで border (境界線) を指定します。

このオプションは Syntaxhighlighter 用の独自のクラスを CSS 上で設定出来る機能です (多分)。CSS に詳しい先輩ならあれこれと使いこなせるはずなので、色々試してみてください。

class-name の機能を利用するには、テンプレートのカスタマイズからスタイルシートを編集します。

ここでは synborder というクラスを作って枠線を指定してみます。スタイルシートに以下の様に追記してください。場所は "Blog Base Color" の直上にしました。

    :

    .

/* Syntaxhighlighter */

.class_name_synborder { 

border: 1px dotted #aaaaaa; 

padding-top: 20px;

padding-right: 1px;

padding-bottom: 20px;

padding-left: 5px; 

}



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

		Blog Base Color

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

    :

    .

記事投稿の際に <pre /> タグで呼び出します。記述は <pre class="brush: css; class-name: 'class_name_synborder'"> とします。結果はこんな感じです。

    :

    .

/* Syntaxhighlighter */

.class_name_synborder { 

border: 1px dotted #aaaaaa; 

padding-top: 20px;

padding-right: 1px;

padding-bottom: 20px;

padding-left: 5px; 

}



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

		Blog Base Color

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

    :

    .

数行のコードを表示する場合は枠線がない方が、数十行以上のコードを表示する場合は枠線があった方が見やすい様に思います。

その他オプション

上で紹介した以外には、例えば HTML/XML とその他の言語 (PHP 等) が混在するコードをうまいことハイライトする html-script というオプションがありました。

他には、タブストップの文字数を設定する tab-size がありました。また、コード内の右上にある [?] (Toolbar と呼ぶらしい) を消せる toolbar といったオプションもあります。

僕はこれらを実際には設定していないので、実際のところどういった感じなのかはわかりません。以下のリンクからはすべてのオプションを確認することが出来ますので、興味本位に色々試してみると良いと思います。

本家サイトのページです。

 Configuration

テーマの変更

テーマ (主にカラー) を変更するにはテンプレートに記述した shThemeDefault.css というファイルを変更します。以下の部分です。

<!-- SyntaxHighlighter -->



<link href="http://example.jp/syntax/styles/shCore.css" rel='stylesheet' type='text/css' />

<script src="http://example.jp/syntax/scripts/shCore.js" type='text/javascript'></script>



<script src="http://example.jp/syntax/scripts/shBrushPerl.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushCss.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushPXml.js" type='text/javascript'></script>



<link href="http://example.jp/syntax/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />



<script type="text/javascript">

SyntaxHighlighter.config.stripBrs=true;

SyntaxHighlighter.defaults['highlight'];

SyntaxHighlighter.all();

</script>



<!-- /SyntaxHighlighter -->

styles/shThemeDefault.css というパスを見れば分かる様に、テーマのファイルは .css の拡張子で style/ 直下に格納されています。

また、本家サイトには Themes にリストと表示サンプルがあります。CSS Themes の中の Name のリンクを見てください。

  Themes

気に入ったテーマがあったら、shThemeDefault.css をお気に入りのテーマの Name に置き換えます。これだけで設定は完了です。

僕は Eclipse のテーマを選択しました。Default よりはやや渋く、それでいて highlight オプションを使ったとたんにみせる爽やかな表情に魅せられたわけです。

トップページ, 個別記事, アーカイブ それぞれ別のテーマにしても面白いかもしれないです。

Done

てぃーだブログで SyntaxHighlighter を使うシリーズはこれで完了です。

あまたのリクエストを受けてバージョン 3 から追加されたという動的なブラシ読み込み機能 autoloader なんかも試してみたいところですが、それはまた次の機会にします。

Syntaxhighlighter の記事