ためセル！では、広告を掲載しています。

Cocoonでソースコードをハイライト表示する方法【プラグイン不要】

サイトでためセル！

2023.10.052023.10.21

この記事は約8分で読めます。

以前、サイトにコピーボタンを導入する方法についてご紹介しました。

その時にJavaScriptのソースコードを掲載しましたが、コードの文字はすべて黒一色となっていました。

でも、これだと少し見づらいです。

ちなみに、コードを編集するソフトでは下の図のように文字に色が付いて見やすくなっています。

このようにソースコードの文字を色付けして表示することを「シンタックスハイライト」といいますが、プログラムなどのコードを解説しているサイトだと、上の図の編集ソフトのようにカッコよくハイライトして掲載している場合をよく見かけますね。

このシンタックスハイライトをあなたのサイトでも導入したいと思いませんか。

本来、シンタックスハイライトをサイトに導入するにはプラグインを導入したり、自分でコードを書いたりする必要がありますが、実は、Cocoonテーマのサイトであれば、プラグインを導入したりすることなく、設定を変更するだけで実現することが可能なのです。

ということで、このページではCocoonでソースコードをハイライト表示する方法【プラグイン不要】についてご紹介します。

スグにためセル！ – ここを読めばすぐ使える

Cocoonテーマのサイトで、ソースコードをハイライト表示にするには、「Cocoon設定」の「コード」タブにある「ハイライト表示」にチェックをつけるだけです。

役に立った

※　より詳しい解説はここから下に続きます。

ソースコードをハイライトさせるためには

本来、WordPressでソースコードをハイライトさせるためには、プラグインが必要です。

例えば、Highlighting Code Blockプラグインなどが有名です。

しかし、ためセル！でも利用している無料のテーマ「Cocoon」なら、このようなプラグインを導入せずとも、コードのハイライトを行うことが可能なのです。

Cocoonでソースコードをハイライトする方法

それでは、ここからCocoonでソースコードをハイライトする方法をご紹介していきましょう。

Cocoonを導入しても、初期設定のままではハイライトされないので、設定を行う必要があります。

まず、WordPress管理メニューの「Cocoon設定」を開きます。

「Cocoon設定」が開いたら、上のタブの中から「コード」を選択し、「ソースコード設定」画面を開きます。

この中の「ソースコードをハイライト表示」にチェックを付けるとソースコードがハイライトされるようになります。

下にある「行番号表示」は、お好みで設定するといいでしょう。
こちらにチェックを付けることで、ソースコードの左側に行番号が表示されるようになります。

ライブラリの設定

設定の下の方には、「ライブラリ」という項目があります。

これは、ソースコードの対応言語をどのくらいまで対応させるかというものです。
つまり、JavaScriptやPHPやCSSなど、ソースコードにはさまざまな種類がありますが、これらにどこまで対応させるかということです。
まぁ、メジャーな言語しか扱わないのであれば「軽量版」で十分だと思います。

もし、使っている言語が対応できない場合は、「全て」にするといいでしょう。

ハイライトスタイルの設定

次は「ハイライトスタイル」です。

こちらの設定を変更することで、ソースコードの表示スタイルを変更することができます。

スタイルはとてもたくさんあるので悩んでしまいますし、スタイルの名前だけ見ても、実際にどんな表示になるのかがわからないかと思います。
そのような場合は、highlight.js demoでスタイルを確認することができますので、一度のぞいてみるといいでしょう。

ためセル！

それにしても、本当にたくさんあって悩みます。

ハイライト表示するCSSセレクタの設定

最後の「ハイライト表示するCSSセレクタ」ですが、こちらは特に変更する必要はありません。

ただ、ハイライトするソースコードのクラス名を変更していたり、別のクラス名のソースコードもハイライト表示したいという場合は、こちらに追加することができます。

最後に設定を保存して終了しましょう。

記事作成画面でのソースコードの追加方法

それでは、実際にソースコードをハイライト表示させてみましょう。

設定が済んでいれば、編集画面でソースコードを追加するだけで、ハイライト表示されるようになります。
ちなみに、通常の段落ブロックにソースコードを記述してもハイライト表示にはなりません。きちんとコードブロックを追加する点だけご注意ください。

ということで、記事の作成画面でコードブロックを追加します。
コードブロックを追加するには、「/コード」を入力するのが最も簡単です。

もしくは、編集画面の左側にある「ブロック挿入ツール」から、「コード」を選択します。

ブロックを挿入したら、そのままコードを記述しましょう。

編集画面ではハイライトされませんが、公開すればハイライトされますのでご安心ください。

言語の指定を行う

コードブロックにソースコードを入力した後は、それが何の言語なのかを右のブロックメニューの中から指定してあげましょう。

ここの指定を間違えると、正しくハイライトされませんので、ご注意ください。

また、ここの設定では、あえて「ハイライト表示しない」ということも選択できます。

公開して確認

こうして掲載したコードを公開すると、下のようにハイライト表示されます。

var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>'); 
var btn = $('.cpybtn');
btn.on('click', function() {
  var cpytxt = $(this).parent().text();
  navigator.clipboard.writeText(cpytxt);
  $(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
  setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
});

ちなみに、先ほどの言語の設定を変えてみると下のようになります。
試しに「HTML」にしてみました。

var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>'); 
var btn = $('.cpybtn');
btn.on('click', function() {
  var cpytxt = $(this).parent().text();
  navigator.clipboard.writeText(cpytxt);
  $(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
  setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
});

やはりハイライトする箇所が間違っているようですね。

なお、言語を選択しない場合は、このようになります。

var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>'); 
var btn = $('.cpybtn');
btn.on('click', function() {
  var cpytxt = $(this).parent().text();
  navigator.clipboard.writeText(cpytxt);
  $(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
  setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
});

ある程度自動で判断されるようで、きちんと表示されているようです。
とはいえ、判断が誤る可能性もありますので、できる限り言語の設定はしておくようにしましょう。

ヒント１

上で掲載しているソースコードですが、コードエリアの右上にコピーボタンを表示しています。これは、Cocoonの機能ではなく、ためセル！独自のカスタマイズです。