コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」の使い方

2022.2.6 更新

皆さまごきげんよう。

本日はコードをハイライトさせるプラグイン「WP Code Highlight.js」の使い方です。

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

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

set

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

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

codehl

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

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

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

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

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

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

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

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

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

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

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

さほど多機能ではないですが、その分動作が軽くなったようですよ。

それではまた次回、ごきげんよう(^^)ゞ

コメントを残す