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

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

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

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


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

120418-1

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

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

公開日:2012/04/18

2件のピンバック

  1. […] # 参考サイト SyntaxHighlighter Evolvedのデザインをカスタマイズする […]

  2. […] コチラの記事を参考にさせてもらいました。 ezorisu-web-『SyntaxHighlighter Evolved を使ってみる』 Ateitexe-『SyntaxHighlighter Evolvedのデザインをカスタマイズする』 […]


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。