SyntaxHighlighter一部改修メモ

ソースコードをハイライト表示してくれるので非常に便利なSyntaxHighlighter。JZ5さんがSyntaxHighlighter for Windows Live WriterというプラグインでWLW上でスマートコンテントとして管理できるようにしてくれているので、WLW好きの自分としては是非このBlogにも組み込みたいと思い、作業していたのですが、その中でSyntaxHighlighterの表示の不具合にぶつかりました。今回のエントリではその対応策を記します。

SyntaxHighlighterの持つ問題

SyntaxHighlighterは、通常、一行あたりの文字数が多くSyntaxHighlighterの表示部の横幅を超えるようなソースコードの場合、white-space:normal;の指定により、折り返し表示してくれるようになっています。ですが、半角文字列の折り返しは単語毎に行われるというブラウザの仕様のためか、場合によってはソースコードの折り返しが上手く行われず、横スクロールバーが表示されてしまうという問題があります。そうなると、スクロールした部分は背景の塗り分けが上手く行われず、SSのように違和感のある表示になってしまう、という問題があります。

対応策

上手く折り返し表示させる方法がよく分からなかったので、自分の場合、常に折り返し無しで表示することにしました。そして背景の塗り分け自体も廃し、常時横スクロールバーを表示。また、上のツールメニューもあわせて表示の仕方を変更しました。

長々と言葉で説明しても冗長になるだけなので、SyntaxHighlighterのCSSを上書きするのに使用したCSSファイルを示します。

.dp-highlighter{
	overflow-y:visible;
	overflow-x:scroll;
	background-color:#fcfcfc;
	width:100%;
}
.dp-highlighter ol li,.dp-highlighter ol li.alt{
	background-color:#fcfcfc;
	white-space:pre;
}
.dp-highlighter ol li, .dp-highlighter .columns div, .dp-highlighter .tools {
	border-left:3px solid #e26c6c;
}
.dp-highlighter .tools{
	font-size:120%;
	height:2em;
	padding:0px;
	background-color:#fcfcfc;
}
.dp-highlighter .tools a{
	font-size:100%;
	display:block;
	color:#888888;
	float:left;
	height:1.5em;
	margin:0px;
	padding-top:0.4em;
	padding-bottom:0.1em;
	padding-left:0.5em;
	padding-right:0.5em;
	background-image:url("images/shToolsBG.png");
}
.dp-highlighter .tools a:hover{
	background-image:none;
	background-color:#ffffff;
}
.dp-highlighter ol.dp-c{
	clear:both;
	background-color:#fcfcfc;
}

実際に適用するとこんな感じ。

スクロールさせても崩れてません。

今回は不具合修正をきっかけとして既製のライブラリのCSSの上書きに取り組みましたが、今回のツールメニューや左ボーダーの変更のように、単なるデザインの変更にも使えるので、結構ブラックボックス化しがちなライブラリのデザインを、サイトのデザインと調和させる目的でも色々弄ってみてはいかがでしょうか。

追記

このCSSは桁の表示には未対応です。まぁ全角文字が含まれているとどうせズレが生じるし、放置で良いかな･･･。