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

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

関連記事

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

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

背景

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

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

完成図

このようにしてみました。プラグインのアップデートなどで初期化されちゃったときにまた簡単に直せるように、/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さんとあれこれごねごねしていたら、これじゃないかという情報が…。

• MarsEditで投稿したときに SyntaxHighlighter Evolvedが文字化けしないようにする方法 | 非エンジニアのWordPress奮闘記

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