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

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

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

ミサキ
ミサキ

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

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

  • WordPress 5.2.1
  • Cocoonバージョン: 1.7.8.1
  • Cocoon Childバージョン: 1.0.6

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

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

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

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

HTMLの入力欄

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

ハイライトされたソースコード
ミサキ
ミサキ

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

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

おわりに

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


YouTube: ミサキさん

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

コメント

  1. […] プログラムに色を付けるコードハイライト […]

  2. […] […]

タイトルとURLをコピーしました