WordPress の表示ページ上で、PHP や JavaScript のコードを紹介する際、カラーリングして見易くしてくれるものとして「Syntax Highlighter」を導入すると良い、ということを前回「プログラムソースを綺麗に表示するには」でメモしていた。

前回のプラグインで不満に思っていた事は、「preタグ」に「name属性」を使用していた事だ。この属性、HTMLエディタからビジュアルエディタへ切り替えると、削除されてしまった。だから迂闊に切り替えできない。もう一点は、ソースプログラムの言語の種類によりカラーリング方法を合わせてくれるのは良いが、せっかく言語別に分離されたモジュールがページ表示で全てロードされてしまう。これでは、表示に時間がかかってしまう。

ところで、今日プラグインのライブラリを見ていたら、上を回避してくれる「easy-google-syntax-highlighter」があった。なので、早速変更することにした。

設定画面で、利用しないモジュールをディスエーブルにできるのも良いが、必要なモジュールを自動的に選択して読み込むように指定できるところが、とても気にいった。

また、プラグイン制作者のページに SyntaxHighlighter のページへのリンクがあり、そこに多くドキュメントが掲載されていた。

SyntaxHighlighterは、1行が長いときワードラップしてくれるが、自分はワードラップせずスクロール表示してくれる方を好んでいる。その指定の仕方が、「<pre class=”brush:js; wrap-line:false”>」というように指定すればいい事が、ドキュメントのおかげて分かった。

さらに、ビジュアルエディタで利用されている TinyMCE の設定について、前回の記事で「tiny_mce_before_init」を利用すればビジュアルエディタのカスタマイズができそうな事を書いていたが、実はそのものズバリのドキュメントがあった。

WordPress.ORG のドキュメント 「TinyMCE Custom Buttons」 がそれだ。

ビジュアルエディタを利用するときの表示フォントが気に入らず、パッチを当てている人は多いと思う(参考：編集で利用するビジュアルエディタのフォント変更)。WordPress のバージョンアップの度にパッチを当て直ししなくても済むように、これでより良い方策が思い浮かぶと良いが。