2013
9
26

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

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

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

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

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

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

追記

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

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

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


コメントを残す




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


back to top