「Crayon Syntax Highlighter」の代わりにコードを枠で囲む

こんにちは。齊藤誠(@makotosaito_jp)です。
高速化のためにWordPressのプラグインをできるだけ減らしたいと思っています。

ソースコードをハイライト表示するためのプラグインに「Crayon Syntax Highlighter」があります。
調べてみたらこのプラグイン、結構重いみたいです。

使用しているプラグインの負荷の割合を測定する方法

mechalog.com

2015-07-09 15:16

ソースコードを軽量でハイライトしてくれる「highlight.js」というjavascriptのライブラリがあるようですが、当サイトのようにソースコードをハイライト表示する機会が少ない場合はHTMLで枠で囲むだけで充分なのでは？と思ったんです。

それで作ったのがこちらです。

▼デスクトップ表示

▼スマホ表示

ユーザー側の立場としてハイライト表示をコピーする時に一目でどこを押したらコピーされるかわからない時があります。また、行ごとに表示されている数字もコピーされることもあるんです。

このようにちょっとしたコードなら、ハイライト表示させなくても枠だけの方がユーザー側からしたらコピペしやすいという面もあります。

▼今回使用したコードがこちら

これだけです。コピーもしやすいです。

使い方

使い方は「投稿の編集」の「テキスト (HTML)」にコードをこのままHTMLで貼り付けます。「ここに後でコードを入れる」には「ビジュアル」に切り替えてから記事で紹介したいコードを貼り付けます。これでOKです。

最初からHTMLに全て貼り付けてしまうと、記事で紹介したいコードがコードHTMLとして認識されてしまうのでこの手順です。

見た目ではハイライト表示に劣ってしまっているかもしれませんが、ソースコードを紹介する機会が多くないのならこの方法が一番軽くシンプルなのかもしれません。