SyntaxHighlighter Evolved2.xのデザインをカスタマイズする

WordPressでコードを書いている人ならきっと使っているSyntaxHighlighter Evolvedですが、見た目をもうちょっといじりたいな…と思っておりました。やり方が分かったのでご紹介。

追記：2013年9月にver3.xへ変更しました。こちらの記事をどうぞ。

こんな感じにカスタマイズ

デフォルトは非常にシンプルで使いやすいんですが、なんかこう、いじってみたくなってあちこち調べてみたら親切に紹介して下さってる方がいらっしゃいました！

SyntaxHighlighter Evolved を使ってみる -ezorisu-web

こちらのコードを拝借して、更に自分好みに変更させて貰ったのがこちらです。

/*shThemeDefault.css改変部分*/

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

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

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
	background-color: #dfff76 !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: 98% !important;
	overflow: auto !important;
	margin-bottom: 10px !important;
	border-top: 1px #ddd solid !important;
	border-left: 1px #ddd solid !important;
	border-right: 1px #999 solid !important;
	border-bottom: 1px #999 solid !important;
}

.syntaxhighlighter:before /*タイトル部分追加*/
{
	display: block !important;
	content: "Source Code";
	color: #6f6e69 !important;
	background-color: #ddd !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.2em !important; /*行間調整*/
}

.syntaxhighlighter
{
	padding: 3px !important; /* 外周のpadding */
	background: #fff !important; /* 外周背景色 */
}

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

こいつを、/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles内のshThemeDefault.cssの最後に追加してあげればOKです！

結構前から“変えてみたいなー”ってぼんやり思ってたので、出来て嬉しいですw