コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」を使ってみた

皆さまごきげんよう。ジメジメとうっとおしい季節、いかがお過ごしですか?
これから梅雨明けも間近に控えて、夏が大の苦手な私が最近気になっているのが「空調ざぶとん」って云うんですか?お尻にヒンヤリ空気を運ぶという、ファンが付いた座布団です。どの程度の音がするのか?気になるところですが、これを会社で使いたい(笑)。あと冷房服。すごく着てみたい(笑)。

さて、今まで使っていたコードをハイライトさせるプラグイン、「Crayon Syntax Highlighter」が一体いつ頃からなのか?なぜか今まで通りに表示されなくなっていまして、まぁ、動作が重かったこともありますし、この度これに代わるプラグイン「WP Code Highlight.js」を使ってみることにしました。

プラグイン「WP Code Highlight.js」を設定する

●プラグイン → 新規追加 からプラグインの検索窓に WP Code Highlight.js と入れて検索 → インストール → ネットワークで有効化します。

●設定 → WP Code Highlight.js から設定します。
set

Packageの Common で足りない方は▼から All、または Custom を選んで必要な言語にチェックを入れます。

Color Schemeは、こちらから、Styles でデモを見ることが出来ます。気に入ったものを▼から選びます。
codehl

●あとは特にいじらずにSaveボタンをクリック。

使い方も簡単で、コードを

<pre><code> ここにコードを書く </code></pre>

で囲むだけでOKという手軽さです。言語も自動で判別してくれます。
ちなみにハイライトさせたくない場合は

<pre><code class="nohighlight"> </code></pre>

これで囲むそうです。(ですが、単に <code> </code>を外してもハイライトされませんね。)

ただし、htmlなどで使われる特殊文字(&、”、<、>)は、マークアップ文字(&amp、&quot、&lt、&gt)に変換してから、

<pre><code>  </code></pre>

で囲んであげてくださいね。

こちらなどの文字変換サイトが便利です。

Crayon Syntax Highlighter ほど多機能ではないですが、その分気持ち軽くなったようではあります。それほどがっつりコードを載っけるわけでもないので、これくらいで充分かなと思います。

この記事を読んでくださった皆さま、他にもお勧めのシンタックス・ハイライト系のプラグインなどありましたら、ぜひ私にも教えてくださいませ!宜しくお願いします(^^)ゞ

コメントを残す