WordPress

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

wordperss

 

今回はコードを記事内に挿入できるプラグイン「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 > li ul {
list-style-type: disc;
margin-top: 15px;
padding-left: 20px;
color: #008db7; }

導入手順

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

導入手順

使い方

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

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

 

 

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