【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コードはそのまま表示されないんですよ。
< >を使ったコードのことです。

たとえば、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の偉大さを知った次第です(*_*) 

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

コメント