プラグイン「Crayon Syntax Highlighter」を使わずにソースコードの表示をすることにしました

これまでソースコードの表示には「Crayon Syntax Highlighter」を使っていたのですが、これからはプラグインやライブラリを使用せずに表示させることにしました。

きっかけ

はじめてこのプラグインを導入したのは3年ほど前だったでしょうか。初心者でも簡単にソースコードを表示できるプラグインとして多く紹介されており、特に見た目の面が非常に気に入ってインストールしたのでした。

設定で「必要な時だけCrayonのCSSやJavaScriptを読み込むように試みる」をチェックしたり、それでも全ページで読み込まれてしまうCSSファイルをfunctions.phpで制御したり、問題視されがちな「重さ」を軽減しようと工夫しながら使っていました。

しかし、先日のリニューアル作業をしていてふと気が付きました。

そもそもソースコードを載せている記事って少なくない?

ご覧の通り当ブログはプログラミング専門では決してないため、当然といえば当然でしょう。現時点で公開されている記事の中でソースコードを載せているのは、わずか5記事しかありませんでした。

その少ない記事のためだけにプラグインを使う必要性って?

そんな疑問が湧き上がり、現時点で最終更新から1年経過しているのも後押しとなって「Crayon Syntax Highlighter」を停止することにしました。

JavaScriptライブラリも使わない

WordPressプラグインなしでソースコードを表示させる方法を見つけるべく、「シンタックスハイライト ワードプレス」などのワードで検索してみたところ、JavaScriptライブラリを使う方法があると知りました。

主に「highlight.js」や「Prism.js」などが人気だったため、それらを使うことも考えましたが、いろいろなサイト・ブログを見ていたところプラグインやライブラリを使わずともソースコードを表示できることに気が付きました。

単純に<pre><code>~</code></pre>を使ってスタイルをあてれば、プラグインなどに比べて機能面では劣るものの、表示させることはできるわけです。

コードを多く紹介記事しているサイトで、ライブラリ等を使わずシンプルに表示しているのをいくつか見つけ、当ブログなら尚更(ライブラリ等を)使わなくても問題ないなと思いました。

こんな感じに表示していきます

そんなわけで<pre>タグや<code>タグにスタイルをあて、次のようにコードが表示されるようにしました。

body {
   font-size: 16px;
}

実にシンプル。<span>タグを使えばこんな感じにも。

/* コメントコメントコメント */
body {
   font-size: 16px;
   color: #333;
}

コメントや強調したい箇所は<span>タグで囲んでスタイルをあてています。

実際に記事を書いている時、ワードプレスのテキストエディタでは次のように記述しています。

<pre><code><span class="hl-comment">/* コメントコメントコメント */</span>
body {
   font-size: 16px;
   <span class="hl-color">color: #333;</span>
}</code></pre>

毎回<span class=”hl-comment”></span>などと打つのは面倒なので、「AddQuicktag」というプラグインを使ってタグを登録し、ボタンクリックで挿入できるようにしています。

また、ソースコードをそのまま表示するためには、場合によって文字をエスケープ処理する必要がありますが、それも「AddQuicktag」に用意されている「HTML Entities」というボタンを使えば簡単に変換できます。

「HTMLエスケープ ツール」などと検索すれば便利なオンラインツールが出てきますが、「AddQuicktag」を使っていれば投稿画面から移動せずに変換作業ができるので楽です。

変換したい場所をドラッグし、「HTML Entities」というボタンを押すと……

こんな感じに変換されます。ちなみに、この変換されたコードをドラッグして「Decode HTML」を押すと元に戻ります。

最後ちょっと話が逸れてしまった感もありますが、今後はプラグイン等を使わずにソースコードを表示していきますよ、というお知らせ記事でした。