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

csh-codeframe-min

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

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

SPONSORED LINK

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

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

▼デスクトップ表示
csh-codeframe2-min

▼スマホ表示

csh-codeframe3-min

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

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

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

<div style=”padding: 16px; font-size: 11px; border: solid 1px #5ab57c; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”><font color=”#d92e00″>
ここに後でコードを入れる
</font></div>

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

使い方

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

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

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

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!