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

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

WordPressでコードを書きたい時に欠かせないSyntaxHighlighter Evolved。コードのデザインが好きでずっとver2を使っていたんですが、思うところがあってver3へ変更して、cssをいじってみました。


追記

2016年6月にCrayon Syntax Highlighterへ変更しましたので、それ以降は未検証です。

関連記事

ver2.xのカスタム方法も以前書きました。

背景

このプラグインのver2はマウスを右上に載せるとアイコンが出てきて、プレインテキストが別窓で開いたり、まるごとクリップボードにコピーしてくれる機能があって、私もそれを常用していました。ですが、日常的にコードの載っているブログに慣れている方は問題ないと思うのですが、初心者の方は直接コードを選択してコピーしようとして、あれ?行番号まで入ってきちゃうぞ?っていう方多いんじゃないかなぁ、と。

おそらくそういう要望があって3.xが開発されたんでしょうし、最近ExcelVBAの入門記事へのアクセスが多くなってきていることから、3.xに変えたほうがいいんじゃないかしら…。と、思った次第です。しかもそれを2.xっぽいデザインで使いたいという我侭w

完成図

130926-1

このようにしてみました。プラグインのアップデートなどで初期化されちゃったときにまた簡単に直せるように、/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles内のshThemeDefault.cssの最後に追記して上書きするような形にしています。

shThemeDefault.css

/*ここから追加部分*/
.syntaxhighlighter {
	width: 98% !important;
	overflow-y: hidden !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;
	padding: 3px !important; /*外周のpadding*/
	background: #fff !important; /*外周背景色*/
}

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

.syntaxhighlighter .line.alt2 {
	background-color: #F8F8F8 !important; /*奇数行色*/
}

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
	background-color: #dfff76 !important; /*ハイライト色*/
}

.syntaxhighlighter .gutter .line {
	border-right: 3px solid #ddd !important; /*行番号とコードの境界色*/
}
.syntaxhighlighter .gutter .line.highlighted {
	background-color: #ddd !important; /*ハイライト行の境界色*/
	color: white !important; /*ハイライト行の番号色*/
}

色などはお好みで変更してください。

特殊文字のエスケープ…?

ちなみになんですが、今までは大丈夫だったのに、コード内に書いた特殊文字が勝手にエスケープされてしまう(「”」が「& quot;」になってしまうなど)という現象が起こるようになってしまいました…。

どこのタイミングからか特定できなかったのですが、いつからか記事を更新するとそうなってしまっていたようで、過去記事もいくつかやられてしまってアップアップ_(´ω`_)⌒)_

というようなことでちょっと困っております。どなたか情報お持ちの方がいらっしゃったら、また、修正漏れの記事など発見された際にはご連絡頂けると大変嬉しいです。よろしくお願いいたします!

追記

同じ現象に悩まされていた@mas_ydaさんとあれこれごねごねしていたら、これじゃないかという情報が…。

これをやったらエスケープされなくなりました!うむむ、今後のアップデートでも注意したほうがいいかも…。。

公開日:2013/09/26
更新日:2014/03/01

1件のピンバック


コメントを残す

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

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

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

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

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