[WP] ソースコード編集画面が見やすくする「Advanced Code Editor」導入+カスタマイズ

こんな感じのソースコード編集画面が、
screenshot.82

こうなります。
screenshot.84

まずは、プラグイン>新規追加より以下のプラグイン追加
Advanced Code Editor

インストール
プラグインの有効で完了です。

ここからちょっとカスタマイズです。
必要な方だけ設定してみてください。
※ただ、ほかのプラグインの影響を検証していません。。

ソースコードのフォントがちょっと嫌だったので、
「font-family: Consolas,’Courier New’,Courier,Monaco, monospace !important;」
に変更します。

codemirror.cssファイルの以下の部分を変更
/wp/wp-content/plugins/advanced-code-editor/css/codemirror.css

変更前

変更後

デフォルトテーマを使う場合、default.cssファイルの以下の部分を変更
/wp/wp-content/plugins/advanced-code-editor/themes/default.css

wp-multibyte-patchプラグインのフォントが優先されるため、
強制的にコメントアウト。かなり強引です。
/wp/wp-content/plugins/wp-multibyte-patch/ext/ja/admin.css

変更前

変更後

以上です。wp-multibyte-patchのCSS編集は、
ほかへの影響はいまのところないようですが、
調査不十分なところもあるので、さらにもっと良い方法が
ありましたら、ご報告お願いします。