【Cocoon】プラグインなしでソースコードがハイライト表示できる

こんにちは、ikuzo(いくぞう)です。

私、エックスサーバーを使ってますが、だいぶ前から

「PHPを7.2から、7.3や7.4にあげた方がいいよ」という主旨のメールがきてたんです。

最近になってWordPressからも

「いいかげん、PHPのバージョンアップしなさいよ」と促されたので、

ようやく重い腰をあげることにしました。

すると、

((((;ﾟДﾟ))))Warning!!!

PHPを7.2から7.3にバージョンアップしたところ、画面に“Warning”の文字が広がったんです。

慌てて7.2に戻しましたよ(￣ε￣；)

よく見ると、ソースコードを表示するプラグイン

“Crayon Syntax Highlighter”が原因のようでした。

ずっとこのプラグインを使ってきましたが、実はこのプラグイン、かれこれ4年以上更新されてません。

PHP7.2までは、かろうじて使えたんですが、PHP7.3には対応していないんですね。

「プラグインとPHP、どちらが優先か？」と聞かれたら、それは当然「PHP」なので、

“Crayon Syntax Highlighter”とは、この機会にオサラバすることにしました。

別のプラグインの使用も考えたのですが、とりあえず“Crayon Syntax Highlighter”を停止してみたところ、

ソースコードはちゃんと表示されたので、プラグインの使用はやめることにしました。

プー太郎

なるべくプラグインは少なくした方がいいみたいだからね。

質素ですが、表示はされてます。

ということで前置きが長くなりましたが今回は、

プラグインなしでソースコードを表示する方法と、

Cocoonでソースコードをハイライト表示させる方法を皆様にお伝えしようと思います。

プラグインなしでソースコードを表示させるには
HTMLコードを表示させるには
HTMLエスケープでコードを変換
Cocoonはプラグインなしでもハイライト表示できる

プラグインなしでソースコードを表示させるには

ビジュアルエディタでソースコードを表示する方法はかんたんです。

コードを<pre>と</pre>で囲めばいいんです！

こんな感じでテキストエディタにソースコードを書きます。
（プラグインのクラシックエディター使ってます。）

そのままビジュアルエディタに切り替えても、一応このように表示されます。

テキストエディタに戻して、<pre>～</pre>（preタグ）をつけると、

ちゃんと枠で囲まれるんですね。

プラグインがなくても、これで十分じゃないですか。

WordPressの機能なのか、Cocoonを作ったわいひらさんのおかげなのか分かりませんが、どちらにしてもスバラシィです。

HTMLコードを表示させるには

ただ、HTMLコード※はそのまま表示されないんですよ。

※< >を使ったコードのことです。

たとえば、preタグをつけて、こんなコードをテキストエディタに書いたとします。

すると、コードは表示されずにボックスができてしまいます。

好みのボックスを作るんだい！

原因は、divや/divのそばにある< >です。

ソースコードで表示する際は、< >を<と>に変換する必要があるんです。

<と>に変えると、ソースコードがちゃんと表示されます。

<div style="color: blue;
            font-weight: bold; 
            font-size: 20px;
            background: yellow;
            border: solid 3px red; 
            border-radius: 10px; 
            padding: 0.5em 1em;
            margin: 2em 0;">
好みのボックスを作るんだい！
</div>