【WordPress】記事内にコードを挿入するプラグイン「Crayon Syntax Highlighter」の使い方を解説

今回はコードを記事内に挿入できるプラグイン「Crayon Syntax Highlighter」について解説したいと思います。コードやプログラミングについて解説する記事の場合は、絶対に入れておきたいプラグインの1つです。

Jinというテンプレートを使用している場合、コードを挿入できる機能は標準装備されています。この記事はコードを挿入できる機能が標準装備されていない方向けです。

この記事の内容

Crayon Syntax Highlighterとは

「Crayon Syntax Highlighter」とは、記事上でコードを表示できるプラグインです。

例えばCSSコードをそのまま記事に張り付けてしまうと、以下のようになってしまいとても見にくいですよね。

#toc_container .toc_list > li ul {
list-style-type: disc;
margin-top: 15px;
padding-left: 20px;
color: #008db7; }

しかしこのプラグインを使えばこのように表示することができ、コードがグッと見やすくなります。加えて、コードのプロパティを自動で検知、色付けもしてくれます。

#toc_container .toc_list &gt; li ul {
list-style-type: disc;
margin-top: 15px;
padding-left: 20px;
color: #008db7; }

以下の画像のように進めてください。

プラグインを有効化しビジュアルエディタを開くと、下図のように＜＞マークが出てきます。そこをクリックし、下記のように進めていきましょう。

ビジュアルエディタとテキストエディタ、どちらも同様の手順でコードを表示させることができます。

今回は記事上でコードを表示できるプラグイン「Crayon Syntax Highlighter」について紹介しました。ブログでコードやプログラミングについての記事を書く人は、絶対に入れておきたいプラグインの一つなので、ぜひインストールしておきましょう。