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

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

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

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

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

最近になってWordPressからも

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

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

すると、

WordPress “Warning”画面

((((;゚Д゚))))Warning!!!

 

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

慌てて7.2に戻しましたよ( ̄ε ̄;)

 

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

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

Waningの原因はプラグインの“Crayon Syntax Highlighter”

 

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

“Crayon Syntax Highlighter”のインストール画面

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

 

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

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

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

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

プー太郎
プー太郎

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

プラグイン有りと無しのソースコード

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

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

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

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

スポンサーリンク

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

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

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

テキストエディタにソースコードを書く
こんな感じでテキストエディタにソースコードを書きます。
(プラグインのクラシックエディター使ってます。)
ビジュアルエディタのソースコード
そのままビジュアルエディタに切り替えても、一応このように表示されます。
テキストエディタに戻してpreタグをつける
テキストエディタに戻して、<pre>~</pre>(preタグ)をつけると、
枠で囲まれたソースコードが表示された
ちゃんと枠で囲まれるんですね。
プラグインがなくても、これで十分じゃないですか。

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

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

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

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

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

ボックスのコードをテキストエディタに書いた

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

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

 

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

ソースコードが表示されない原因

 

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

HTMLに変換する

HTMLに変換する2

 

&lt;と&gt;に変えると、ソースコードがちゃんと表示されます。

<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>

HTMLエスケープでコードを変換

かといって、いちいち< >を変換するのは面倒ですよね。

そこでHTML Escapeという便利なツールがあります。

HTML Escape / Unescape
テキストをHTMLエスケープしたり、戻したりするツールです。スマホ表示に最適化しています。

HTMLエスケープ

 

左側の窓にコードを貼り付けると、右の窓に変換されたものがでてきます。

HTMLでソースコードを変換した

 “ (ダブルクォーテーション)も一緒に変換されますが、気にしないで下さい。

変換されたコードの前後に<pre></pre>をつけて、テキストエディタに貼り付ければビジュアルエディタでソースコードが表示されます。

変換されたコードをテキストエディタに貼り付ける

 

ビジュアルエディタから、再びテキストエディタに切り替えるとダブルクォーテーションは元に戻ってます。

元に戻ったダブルクォーテーション

Cocoonはプラグインなしでもハイライト表示できる

でも、ソースコードはやっぱりハイライト表示させたい」という方には、特にプラグインを入れなくてもCocoonは表示できるんですね。

実は、今回この記事を書くまで知りませんでした。やっぱりCocoonってスゴイです。

Cocoon設定
Cocoon設定を押して、
「コード」タブを選択
「コード」タブを選択します。
「ソースコードをハイライト表示」にチェックを入れる
「ソースコードをハイライト表示」に チェックを入れると、
ソースコードがハイライト表示
ソースコードがハイライト表示されます。
「行番号表示」にチェックを入れる
「行番号表示」にも チェックを入れると、
ソースコードの左側に行番号が表示された
左側に行番号も表示されます。いたれりつくせりですね。

 

ハイライト表示も好きなスタイルを選べます。

ドロップダウンリストからハイライトスタイルを選択する
しかし、とんでもない数のスタイルがあって選ぶのが大変です(^_^;)

Cocoonでソースコードを表示させる方法について、詳しくはこちらをご覧下さい。

ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

スタイルのサンプルはこちら

highlight.js demo

 

ということで、Cocoonはソースコードを表示したり、ハイライト表示させるためのプラグインは必要なかったんですね。

あらためてCocoonの偉大さを知った次第です(*_*) 

最後まで読んでいただき、ありがとうございました。

コメント