ブログを書いていると、記事中にHTMLやjavascriptなど、プログラムのソースコードを「読むために」表示させたいことが多々あるかと思います。

その際、通常の文字と同じようにソースを記載すると、当然ですが、本文の文字と同様のスタイルでソースコードが表示されますよね。

このソースコードを記事中に掲載する問題を簡単に解決して、綺麗に表示させるWordPressのプラグインが「Crayon Syntax Highlighter」です。

※Crayonとは、あの子どものころに使っていた絵を描く“クレヨン”から来ています。

Crayon Syntax Highlighterについて分かりやすい記事

Crayon Syntax Highlighterについて分かりやすい記事がありましたので、詳細は以下をご確認ください。

参考【WordPress】Crayon Syntax Highlighterに乗換え!ソースコードを色分けて行番号表示

ソースコードを記事にそのまま記載すると何が問題か?

本文の文字スタイルのままソースコードを記載する際の問題点としては以下があります。

  • 文字が大きくて見づらい
  • 行間が空きすぎていて見づらい
  • ソースの行が多く、縦に長くなって見づらい
  • ユーザーさんがコピペしづらいことがあるかも

ソースコードは文字数が多くなりがちなので、本文よりは小さい文字がふさわしく、また、ローマ字なので行間がさほどなくても可読性に支障はありません。

また、ソースコードはユーザーさんがコピペして使うことが多いと思うので、通常の文字としてソースコードを掲載するとコピペしづらい、というケースもありますよね。

これらの問題を解決するにはCSSで個別に設定すれば解決できますが、面倒なのでWordPressを利用している際はプラグインを入れる方が簡単に解決できます。

私が変更している点は2つ

Crayon Syntax Highlighterの設定で、私が変更している箇所が2つありますので、ご紹介します。

「ツールバーの表示」を「常に表示」にする

デフォルトは「マウスオーバー時」になっていますが、これだとソースコード部分にマウスポインタが乗っかるとCrayon Syntax Highlighterが生成したスペースの上部にある「ツールバー」が出てきて、マウスポインタが外れたら引っ込むのですが、何度も繰り返されるとピョコピョコうるさい感じなんですよね。

ですので、「マウスオーバー時」から「常に表示」に変更しています。

「Wrap lines by default」にチェックを入れる

デフォルトでは、「Wrap lines by default」にチェックが入っていません

デフォルトだと、ソースコードの一行が横幅を超える文字数の場合に、途中で切れて見えなくなり、マウスオーバーで横スクロールバーが表示され、スクロールバーをスライドさせることで切れた文字の続きを確認することができます。

しかし、これだと一目でパッと内容が分からないので、個人的には好きではありません。

ですので、「Wrap lines by default」のチェックを入れることで、長い文字列の場合は「折り返し」されて全体が表示されます。

スマホユーザーのユーザビリティにも良い!

また、スマホで見た場合、横スクロールがしづらいため、この設定はスマホユーザーのユーザビリティにも貢献していると考えています。

ただ、一長一短で、スマホで見ると折り返された分だけ縦に長くなりますので、これは場合によっては検討した方がいいかもしれません。