2009.08.10.

SyntaxHighlighter Evolved を使ってみる

WordPressに便利機能を追加してくれるのがプラグインです。
ちょっと前から使っているのが、ソースコードを見やすくしてくれて行番号もふってくれる「SyntaxHighlighter Evolved」です。
ウェブ上でソースコードを表示するときって、どうやって書くのが正解なのか正直言ってよくわかりません。preタグの中でさらにcode要素としてソースを書くのが一般的なようなので、このサイトでもそれに習っていました。ただソースコード部分は、そのままだとうまく表示されないので、実体参照変換してから貼り付けるとかいろいろと面倒。
そういうのを非常に楽ちんにしてくれるのが、「SyntaxHighlighter Evolved」なわけです。

こんなふうに表示してくれます。

SyntaxHighlighter Evolved のスクリーンショット

SyntaxHighlighter Evolved のスクリーンショット

ステキだ。記入時に実態参照変換も必要ありません。
使い方も簡単。ソースの内容を例えばcssならば、[ css ] cssソース [ /css ] というふうにソース内容に合わせて囲ってあげるだけ。

で、例によってウェブサイトデザインに合わせて外観イメージを少しいじってみます。こんな感じで

<div id="menu">
	<ul>
		<li>Home</li>
		<li>Themes</li>
		<li>About</li>
	</ul>
</div>

「SyntaxHighlighter Evolved」を組み込むと、pluginsフォルダの中のsyntaxhighlighterの中にさらにsyntaxhighlighterがあってその中にstylesフォルダががあります。中には、cssファイルがいろいろはいっています。
今回は、shThemeDefault.cssを元にして改変します。「SyntaxHighlighter Evolved」でDefault設定を使う場合参照しているのは、shCore.cssとshThemeDefault.cssのふたつなので、shThemeDefault.cssの後ろの方にshCore.cssの変更分も合わせて下記のcssを書き加えました。

/*shThemeDefault.css改変部分*/

.syntaxhighlighter
{
	background-color: #e7e5dc !important; /*行番号部分の色*/
}

/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
	background-color: #ffdc40 !important; /*ハイライトしたときの行番号色*/
	color: black !important; /*ハイライトしたときの行番号文字色*/
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
	background-color: #ffdc40 !important; /*ハイライトしたときのコード行色*/
}


/* Add border to the lines */
.syntaxhighlighter .line .content
{
	border-left: 3px solid #fff !important; /*行番号とコードの境界*/
}

/* Second line */
.syntaxhighlighter .line.alt2 .content
{
	background-color: #f6f6f6 !important; /*偶数行の色*/
	border-right: 3px solid #fff !important; /*偶数行の右端にボーダー追加*/
}

.syntaxhighlighter .line .content .block
{
	background: url(wrapping.png) 0 1.5em no-repeat !important; /*改行アイコン 行間調整*/
}

.syntaxhighlighter .toolbar /*ツールバーのバックカラー消去*/
{
	background-color: transparent !important;
	border: none !important;
}

.syntaxhighlighter /*追加項目*/
{
	width: 90% !important;
	overflow: auto !important;
	margin: 18px auto 36px !important;
	border: 1px dotted #959aa1 !important;	
}

.syntaxhighlighter:before /*タイトル部分追加*/
{
	display: block !important;
	content: "Source Code";
	color: #6f6e69 !important;
	background-color: #e7e5dc !important;
	height: 20px !important;
	width: auto !important;
	padding-left: 5px !important;
	border-bottom: 3px solid #fff !important;
}

/*shCore.css改変部分*/

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
	line-height: 1.5em !important; /*行間調整*/
}

.syntaxhighlighter
{
	padding: 0px !important; /* 外周のpaddingは無し */
}

.syntaxhighlighter .toolbar
{
	padding: 2px 8px 2px 0 !important; /* ツールバー表示調整 */
}

お気に召したら、使ってみてください。

本当は、WordPressサイト管理画面の「SyntaxHighlighter Evolved」設定にある「Additional CSS Class(es)」という項目で、自分で作ったcssを読み込めるのかなと思ったんですが、使い方がよくわかりませんでした。英語のページもあさってみましたが、なにしろ英語は苦手なもんでチンプンカンプン。誰かこの設定の使い方わかった人がいたら、教えてください。
そんなわけで、ここでは単純にshThemeDefault.cssの後ろに書き足したというわけです。

わからないついでに、もうひとつ。
頭のところで「Source Code」と表示するようにしてありますが、できれば「CSS」とか「HTML」とかソースに合わせて表示したいところです。
前のバージョンでは、class名が”html”などとなっていたので、書き分けられましたが「Evolved」ではclass名が”brush: xml;”などとなっています。これってcssであつかうときは、どうしたらいいんだろう?よくわかりません。
「教えて、えらい人!」

詳しい導入方法、使い方などは、下記サイトをご覧になるとわかりやすいと思います。