気分はいつでも日曜日

以前からHTMLやJavaScriptなどで調べ毎をしている際に、ソースコードに行番号をつけて見やすくしているサイトはどうしているんだろうと気になってた。

先日ブログをWordPressに移行した際、自分のソースコードを同じようにしてみようとやり方を探ってみたら、なんだプラグインがあるんじゃんって。

で、なにが良いのかいろいろ探ってみたら「Crayon Syntax Highlighter」の評判がいいみたいだった。
インストール後の設定としてはなんかいろいろあるようで、正直全部は分からなかった。というかあまり気にしなかった。

とりあえず自分がデフォルトから変更した設定としては以下のような感じ

Default

After

テーマ
最初は「Cg Cookie」。

サイズ：横幅
Checkを入れて横幅サイズを任意のサイズに変更。

ツールバー：ツールバーの表示
出たり消えたりする「マウスオーバー時」は正直うざい。
「表示しない」でもいいかなーと思いつつ、ソースコードの種類表示やタイトルを表示させるのもいいかと思い「常に表示」に変更。
しかしソース種類のHTMLとXMLはXHTMLで統一されているっぽい。ここは分けてくれた方がわかりやすいのだが。

行：行番号の切り替えを有効にする
行番号の表示非表示切り替えボタンをツールバー上に設置。いらないのでunCheck。

行：Enable line wrap toggling
横幅に収まりきらないソースコードを改行させるボタンをツールバー上に設置。いらないのでunCheck。

コード：単純なコードビューを有効にする
コードエリアをダブルクリックするとシンプルな表示に切り替わるみたい。いらないのでunCheck。

コード：単純なコードの切り替えを有効にする
これもいらないのでunCheck。

コード：常にスクロールバーを表示する
マウスオーバーでスクロールバーが出たり消えたりするのはうざいので、常に表示ってことでCheck。
しかしスクロールバーが細くて使いにくいのが残念。

コード：Enable code expanding toggling when possible
ソースコードが横幅に収まりきらない場合、ソースコード幅いっぱいに領域を広げるボタンをツールバー上に設置。いらないのでunCheck。

あとは使いつつ何かあれば変更って事で、とりあえず最初は個人的に変更が必要無かった部分と、今ひとつ分からなかったのはそのままにした。

その他プラグインとの競合

ビジュアルエディターとして「TinyMCE Advanced」を使用していたのですが、「Advanced Options」の「Stop removing the <p> and <br /> tags when saving and show them in the HTML editor」にCheckを入れておくとHTMLやPHP等のコードでは不具合が出てしまうようです。

不具合の症状としては、投稿時のテキストエディタに追加された「crayon」ボタンでソースコードを書き込むと、<pre>タグが追加され、ソースコード内のHTMLタグの「<」「>」がエンティティ化されて「&lt;」と「&gt;」になります。
そして画面をビジュアルエディタに切り替えて戻ると<pre>が削除されてエンティティ化されたタグが元に戻ってしまう。ちなみに投稿を一度保存した以降に発生します。

時々テキストエディタの方で<p>タグとかいろいろ書き込むことがあったので少々やっかいではあるけど、変わりに「TinyMCE Advanced」のView HTMLのツールを使うことでそこは補えるかなと。

それぞれのバージョン

WordPress バージョン 3.5.2
Crayon Syntax Highlighter バージョン 2.3.0
TinyMCE Advanced バージョン 3.5.8