ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

Crayon Syntax Highlighterはデフォルト設定だと使い勝手が悪すぎる。

WordPressで制作されたサイトのうち、ソースコードを載せているサイトを見てみると、ほとんどの場合は「Crayon Syntax Highlighter」というプラグインが使われています。

ソースコードを載せるだけで、ただの白地に黒文字だったコードが、自動的に色付けされて見やすくなるので、使う人が多いと思われます。

しかし、その掲載されているコードをコピー・ペーストしたくなった場合、使い勝手があまりにも悪すぎるので、ぜひ変えて欲しい設定について。

広告

上部ホバーメニューはいらない。

最初に貼った写真のように、ソースコードの上にマウスカーソルを重ねると、一番上にメニューバーが現れて、全文コピーやプレーンテキストで表示、別ウインドウに表示などのボタンが使えます。

しかし、そのメニューバーですが、ソースコードの一番上にかぶさって表示されてしまうため、一行目のコードが見えなくなってしまうのです。

ちょっとコードを読んでみようと思ったときに、意図せずマウスを乗せてしまい、勝手に一行目を隠されてしまうのはストレスです。

また、ほとんどの場合は何百行にも渡るようなコードを載せていないので、ワンクリックで全文コピーするようなボタンは使わないでしょう。

マウスドラッグで軽く行を覆って、Ctrl+Cでコピーした方が手っ取り早いです。

他にも使わないボタンだらけなので、こんなメニューバーに肝心のソースコードが隠されてしまわないようにしましょう。

Display the Toolbarの設定を「On MouseOver」から「Always」に変更するだけです。

これで、メニューバーは一行目のすぐ上に常に表示されて、コードが隠されることはなくなりました。

むしろ、いらないボタンだらけなので、「None」にして非表示でもいいかもしれません。

ダブルクリック機能はいらない。

ソースコード上のどこでもいいのでダブルクリックを行うと、色付けされたコードから、何も色付けされていないプレーンテキストへと表示が変わります。

しかし、せっかく色付けして見やすくなったコードを、わざわざ見にくいプレーンテキストに戻す意味がありません。

また、ダブルクリックして表示変更ですが、意図しない操作で発動してしまうこともあります。

たとえばコードの一部分だけマウスドラッグで囲って、ハイライト表示させて読みたいこともあるでしょう。

でも、そのマウスドラッグ操作でうっかりダブルクリックだと認識されて、プレーンテキストに化けてしまうこともしょっちゅう。

というわけで、ダブルクリックでプレーンテキストに変化してしまう機能は無効化してしまいましょう。

「Enable plain code view and display」のチェックボックスを外すだけでOK。

行番号はいらない。

何行目で何の処理を行っている、など解説する際に行番号は必要になる場合がありますが、たいていは数百行も書かないコードです。

それだけならまだしも、そこに載っているコードをすぐ使いたいと思い、マウスドラッグでコピー・ペーストしてみると、余計な行番号が付いてきてしまうことがあります。

かといって、行番号が載っていないプレーンテキストに表示をいちいち切り替えるのも面倒です。

マウスドラッグの際に、行番号の上を通らないようにすれば、いちおう行番号をコピーせずに済みます。

でも、そんな緻密なマウス操作を、いちいちユーザに要求させるのも酷な話です。

HTMLタグとして行番号が生成されており、もしCSSで行番号が生成されていたならばコピーされないのですが、それに関してはユーザがどうのこうの言っても変わりません。

もう2年以上更新されていないプラグインですしね。

というわけで、「Display line numbers by default」のチェックボックスを外して、行番号が表示されないようにします。

これで、いちいちプレーンテキストに切り替えなくても、ささっとマウスドラッグしてCtrl+Cすれば、全文コピーできます。

行番号がないということは、プレーンテキストも必要なくなったため、先程書いたメニューバー非表示やダブルクリック無効化を併せて使ってもいいでしょう。