ソースコードをキレイに表示できる SyntaxHighlighter を導入する方法



RW5.x検証済み
このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
サイトのテーマをリニューアルしたので、ソースコードの表示方法も SyntaxHighlighter に変えてみました。その導入方法をメモしておきます。

SyntaxHighlighter とは?

SyntaxHighlighter とは、ソースコードをキレイに装飾して見栄えをよくするための JavaScript です。例えば、以下のような素っ気ないソースコードを…

<div id="content">
	<div id="extraContainer1"></div>
	*content*
	<div id="extraContainer2"></div>
	<div id="breadcrumbs2">*breadcrumb*</div>
</div>			
<div id="sidebar">
	<form id="search" action="*base_url*search/" method="get">
		<fieldset>
			<input type="text" class="text" name="query" value=""/>
			<input type="image" src="*pathto(images/icon-search.png)*"/>
		</fieldset>
	</form>
	<h2 id="sidebar-title">*sidebar_title*</h2>
	*sidebar*
	*plugin_sidebar*
	<div id="extraContainer3"></div>
</div>


このようにキレイに表示する事が出来ます。(↑↓便宜上%を*に置き換えています)

<div id="extraContainer1"></div> *content* <div id="extraContainer2"></div>


導入方法 - ファイルをダウンロードする

まず、必要なファイルをダウンロードします。
SyntaxHighlighter - Download から Click here to download. というリンクをクリックすると自動でダウンロードが始まります。今回必要なファイル(フォルダ)は…

  • syntaxhighlighter_(バージョンナンバー)/scripts
  • syntaxhighlighter_(バージョンナンバー)/styles

2つです。さらにその中から自分に必要なものをピックアップしていきます。


テーマをカスタマイズする

先ほどダウンロードしたファイルをテーマに組込みます。テーマにもよるかも知れませんが、RapidWeaver 5 がエラーを吐いて autoloader 機能を実装する事が出来なかったので、シンプルな方法をとりました。

Contents フォルダにダウンロードしたフォルダをドロップ

まず、導入するテーマの Contents フォルダを開いて 先ほどダウンロードした syntaxhighlighter フォルダ(中は scripts フォルダと styles フォルダの2つにしておく)をドロップします。(フォルダの名前は何でもいいですし、分かる方は既存のフォルダを利用しても結構です。)

Theme.plist に syntaxhighlighter フォルダ へのパスを挿入

次に、 Contents フォルダの Theme.plist を開いて、以下のように syntaxhighlighter フォルダ へのパスを書き込みます。

RWCopyFiles

	images
	css
	js
	styles.css
	print.css
	colour_tags.css
	javascript.js
	syntaxhighlighter


index.html を編集する

次に、index.html を開いて以下のハイライトされた行を挿入します。今回は、必須ファイルの他に、HTML、CSS、JavaScript、コード表示用のCSSファイルを導入する事にしました。(テーマによって index.html の内容は異なりますが、head 内に挿入しておけば間違いないと思います)

<head>
	<title>*title*</title>
	*header*
	<link rel="stylesheet" href="*pathto(styles.css)*" type="text/css" media="all"/>
	<link rel="stylesheet" href="*pathto(colour_tags.css)*" type="text/css" media="all"/>
	<link rel="stylesheet" href="*pathto(print.css)*" type="text/css" media="print"/>
	<link rel="stylesheet" href="*pathto(css/prettyPhoto.css)*" type="text/css" media="screen"/>
	<link rel="stylesheet" href="*pathto(syntaxhighlighter/styles/shCore.css)*" type="text/css" media="all"/>
	<link rel="stylesheet" href="*pathto(syntaxhighlighter/styles/shCoreEclipse.css)*" type="text/css" media="all"/>
	<!--[if IE 8]><link rel="stylesheet" href="*pathto(css/ie8.css)*" type="text/css" media="all"/><![endif]-->
	<!--[if IE 7]><link rel="stylesheet" href="*pathto(css/ie7.css)*" type="text/css" media="all"/><![endif]-->
	<!--[if IE 6]><link rel="stylesheet" href="*pathto(css/ie6.css)*" type="text/css" media="all"/><![endif]-->
	*style_variations*
	<link rel="stylesheet" type="text/css" media="screen" href="css/layout-fonts/japanese.css" />
	*user_styles*	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="*pathto(js/jquery.prettyPhoto.js)*"></script>
	<script src="*pathto(js/extracontent.min.js)*"></script>
	<script src="*pathto(js/setup.js)*"></script>
	<script src="*pathto(javascript.js)*"></script>
	<script src="*pathto(smoothscroll.js)*" type="text/javascript"></script>
	<script src="*pathto(scrolltopcontrol.js)*" type="text/javascript"></script>
	<script type="text/javascript" src="*pathto(syntaxhighlighter/scripts/shCore.js)*"></script>
	<script type="text/javascript" src="*pathto(syntaxhighlighter/scripts/shBrushXml.js)*"></script>
	<script type="text/javascript" src="*pathto(syntaxhighlighter/scripts/shBrushCss.js)*"></script>
	<script type="text/javascript" src="*pathto(syntaxhighlighter/scripts/shBrushJScript.js)*"></script>
	<script type="text/javascript">
	SyntaxHighlighter.all();
	</script>
	<!--[if IE 6]><script src="*pathto(js/ie.js)*"></script><![endif]-->
	<!--[if IE]><script src="*pathto(js/html5.js)*"></script><![endif]-->
	*user_javascript*
	*plugin_header*
	*user_header*
</head>

これでテーマのカスタマイズは終了です。shCore.cssshCore.js は必須ファイルのなので必ず入れます。
今回、CSSには
shCoreEclipse.css を導入しましたが、見た目を他のものに変えたい場合は、shThemeDefault.css など他のファイルと差し替えます。詳細は SyntaxHighlighter - Themes でご確認ください。
装飾する言語に、HTML、CSS、JavaScriptを選択しましたが、他の言語を追加したい場合は
shBrushPhp.js など他のファイルを追加してください。詳細は SyntaxHighlighter - Bundled Brushes でご確認ください。


ソースコードに SyntaxHighlighter を適用する

では、実際にソースコードを装飾してみましょう。

基本コード

基本は以下のコードで適用先のソースコードを囲みます。

Sauce Code

これでOKです。ソースコードが CSS の場合は、
brush: css; とします。詳細は SyntaxHighlighter - Bundled Brushes でご確認ください。(Brush aliasesのところ)


機能を追加する

基本コードに別のコードを追加する事で機能をアップできます。

キャプションを付ける

使っていて思ったんですが、SyntaxHighlighter を使うと右側に?アイコンが表示されます。これがソースコードと被る事があるのでキャプション(タイトル)を付けてやると見やすくなりました。

Sauce Code

このように、title=" " を追加すればOKです。

行をハイライトする

ソースコードの任意の行をハイライトする場合は、以下のコードを追加します。

Sauce Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
</head>
<body>
</body>
</html>

複数行を選択する場合は以下のようにします。

Sauce Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
</head>
<body>
</body>
</html>

他にも色んな機能を追加できます。詳細は SyntaxHighlighter - Configuration でご確認ください。


RapidWeaver で導入する際に注意する点

RapidWeaver SyntaxHighlighter を利用する場合は以下の点に注意してください。

  • 日本語(全角・2バイトフォント)をソースコードに含むと行番号がずれる
  • RapidWeaver で使われている %site_title% などのパーセントを含むコードはそのまま機能してしまうので使わない方が良い(%の代わりに他の記号を使うなどして対処)
  • ソースコード内の<head>タグ、<title>タグなどは機能してしまうので実体参照に変換する(他にもありそう)


参考・便利リンク

今回は以下のサイトを参考にしました。
SyntaxHighlighter
【Javascript】SyntaxHighlighter 3.0 の新機能と注意点 - blog.remora.cx
HTML実体参照変換 : akiyan.com
blog comments powered by Disqus