Cocoonでソースコードをハイライトさせる方法 | WordPress

この記事では、Cocoonでソースコード(HTMLやプログラム)をハイライトさせる方法を説明します。

先に簡単に説明します。
Cocoonには、ソースコードをハイライトさせる機能が標準で備わっているので、ソースコードを<pre></pre>で囲めばハイライトされます。

ミサキ

やっとハイライトさせる方法が分かりました！
ただし、ビジュアルエディタを使う場合は、少し注意が必要なようです。
方法の詳細は、以降の記事をご覧ください。

一応、検証で使ったWordPressとテーマのバージョンを記載しておきます。
バージョンが異なると、表示も若干異なる場合があるからです。

ソースコードをハイライトさせる方法

「ダッシュボード」→「投稿」→「新規追加」をクリックしてビジュアルエディタを開きます。

特に何もせず、ビジュアルエディタに<pre></pre>で囲ったソースコードをペーストすればハイライトされるようですが、そうならない場合もたまにあるんですよね。
そのため、ここでは確実な方法を記載します。

「ブロックの追加」→「フォーマット」→「カスタムHTML」をクリックすると、HTMLの入力欄が出てきます。

その入力欄に、<pre></pre>で囲ったソースコードを入力すれば、ソースコードがハイライトされるようになります。

ミサキ

このプログラミング言語（R言語）のハイライトは、あまり色が使われていないですね。

また、<pre class=”pre”>のように、ソースコードの言語(この場合は、R)を指定すれば、言語に対応したハイライトがなされます。
指定できる言語の種類は、以下サイトの「Language categories」を参照ください。

ソースコードをハイライトさせる方法が分かったので、プログラム関連の記事が増えそうです！
では。

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)