THE HAM MEDIA BLOG

SyntaxHighlighter2のカスタマイズ方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript

SyntaxHighlighter2のカスタマイズ

昨日「HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた」をエントリーしたのですが、今日はカスタマイズ方法を少し紹介しておきます。

SyntaxHighlighterの入手

ダウンロードは配布ページより。ここではいろいろな解説もついているから、使う前にいろいろみておくといい。

SyntaxHighlighterを使う準備

まずは配布元からダウンロードしてきてhead内でスクリプトとCSSを読み込んでおく。CSSは本体となるCSS1つと、テーマを1つ指定しておく。テーマはダウンロードしてきたファイルの中に6つ入っており、自分の好みに合わせて指定をすることができる。入っているCSSは以下の通り。

  • ・shThemeDefault.css
  • ・shThemeDjango.css
  • ・shThemeEmacs.css
  • ・shThemeFadeToGrey.css
  • ・shThemeMidnight.css
  • ・shThemeRDark.css

サンプルでも紹介しようと思ったけど、省略しておきます。サンプルは配布元でもサンプルを公開しているので、そちらを見てください。「 テーマ色サンプル」上記の中から好きなCSSでも、もしくは自分でカスタマイズしたものでも、どれでも使えることができるのだ。

それと、JSも読み込んでおく。JSファイルは、本体となるshCore.jsと、その他に自分が表示させたい言語のJSファイルを読み込んでおく必要がある。最初から設定されている言語はいくつかあり、下記の種類のソースコードを表示することができる。

  • ・Bash/shell
  • ・C#
  • ・C++
  • ・CSS
  • ・Delphi
  • ・Diff
  • ・Groovy
  • ・JavaScript
  • ・Java
  • ・Perl
  • ・PHP
  • ・Plain Text
  • ・Python
  • ・Ruby
  • ・Scala
  • ・SQL
  • ・Visual Basic
  • ・XML

このサンプルも公開されているので、そちらを見てください。「 言語サンプル

ちなみに僕はこの中でも、CSSとJavaScript、XML(HTML)、それと使うかわからないですがPHPを表示できるように読み込んでいます。

これらをhead内で下記のように読み込みます。

<head>
	<link type="text/css" rel="stylesheet" href="/css/shCore.css" /> 
	<link type="text/css" rel="stylesheet" href="/css/shThemeDefault.css" /> 
	<script type="text/javascript" src="/js/shCore.js"></script> 
	<script type="text/javascript" src="/js/shBrushJScript.js"></script> 
	<script type="text/javascript" src="/js/shBrushXml.js"></script>
	<script type="text/javascript" src="/js/sshBrushCss.js"></script>
	<script type="text/javascript">
		SyntaxHighlighter.all();
	</script> 
</head>

そして最後に「SyntaxHighlighter.all();」を指定して、このSyntaxHighlighterを使うようにします。

実際に表示させてみる

head内でSyntaxHighlighterを使う準備をしたら、あとは実際にSyntaxHighlighterを使う指定を行う。使う指定は、pre要素で表示させたいコードを囲み、そのpreのclassに使いたい言語を入れるだけ。下記のようになる。

	alert("Hello world");

「class="brush:js"」なんて指定をしなければならないので、以前のバージョンとは互換性がない。ここはちょっと面倒。ですが、昨日紹介したように、以前の「class="js"」などの指定を今回のバージョンに対応するようにJavaScriptで変化されば、以前のままでも使うことができる。例えばjQueryを使っているなら、こんなスクリプトを先に読み込んでおけばいい。

$(function(){
	$('pre.js').removeClass().addClass('brush:js;');
	$('pre.css').removeClass().addClass('brush:css;');
	$('pre.html').removeClass().addClass('brush:html;');
});

removeClass()とかは必要ないけど、一応つけてみた。この後で説明するclassを使ってカスタマイズを行う場合は、上記のスクリプトに一工夫必要な場合もあったりするけど、今回は省略。

HTMLをvalidにしたい場合

先程のスクリプト、それを入れておくことでHTMLエラーのないvalidに対応したHTMLで使用することも可能になる。文法を気にする場合は指定しておいたほうがいい。

classの値で設定を変化させられる

具体的には配布元を見てもらいたいのですが、JS上だけではなくて、今回のバージョンでは、classでの指定でも設定を変えることができる。

サンプル

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

CSSを設定するように指定ができる。これを使うことで、行をハイライトさせたり、ルーラーを表示させたり、行番号の開始を変化させたりなどができる。しかし、文法的にはエラーになるので、気にする人は、下記のようにスクリプト側で設定をするといい。

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

注意

このSyntaxHighlighter2、次の2点気をつけたほうがいいかもしれない。

1、IE6だと表示おかしい。複数行になると崩れる。
2、画像の指定を忘れずに

1はそのまま書いたとおり。2はツールバーの画像などはCSS内で指定が必要だ。ディレクトリ構造が違う場合は必ず必要になるので忘れないように!

今回はここまで。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る