シンタックスハイライト系プラグイン「Crayon Syntax Highlighter」がエラー。一括エスケープ処理してhighlight.jsに乗り換え

シンタックスハイライト系プラグイン「Crayon Syntax Highlighter」がエラー。一括エスケープ処理してhighlight.jsに乗り換えWordPressカスタマイズまとめ

これまで何度か乗り換えで非常に苦労してきたシンタックス系のプラグイン(コードをハイライトするやつです)。

元々勉強不足なこともありこれまで書いてきたコードのエスケープ処理してなかったり、プラグイン変更すると修正が大変だったり、とても別のプラグインを使うという考えになりませんでした。

ところが先日ConoHa Wingに載せ替えたサイトで「Crayon Syntax Highlighter」がエラーを吐きまくりました。PHPのバージョン7.3になるとエラーでます。

プラグインのアップデートも3年以上されてなくて今後もないようなので、思い切ってWordPressのテーマをCocoonに変更し、Cocoonで使える「highlight.js」を利用することにしました。

スポンサーリンク

preタグ内、codeタグ内の特殊文字(<,>,&)を一括で変換して乗り換え

highlight.jsを使用したソースコードのハイライト表示ですが、HTMLエスケープをしてからソースコードを挿入する必要があります。

Cocoonのコードの説明にも以下のように書かれてます。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

以下のようにHTMLエスケープしてから、挿入してください。

&lt;ul class=&quot;nav nav-tabs&quot;&gt;
&lt;li role=&quot;presentation&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

「Crayon Syntax Highlighter」を停止して実際に「highlight.js」を利用してみたのですが、上手く表示できていない箇所が多数ありました。

そう、以前書いたコードHTMLのエスケープ全くしてませんでした(泣)

1つ1つ変換してくれるツールなどもあるのですが、数が多いので何とか一括で変換できないものか?

探してみたところ、「プラグインなしでhtmlからcodeタグを判別しタグ内の特殊文字(<,>,&)を自動変換する」という記事を発見!!

WordPress(ワードプレス)カスタマイズ!プラグインなしでhtmlからcodeタグを判別しタグ内の特殊文字(,&)を自動変換する
WordPressでソースコードを書くとき、特殊文字を置換するのが大変だったので自動変換するfunction.phpを追加しました。 そのままソースコードを記事に貼り付けるとタグとして実行してしまってコードが表示されないので、それを表示する

ただ、私の場合はcodeタグすら使っておらずpreコードのみだったので、記事の自動変換コードを参考にしてcode内ではなくpre内のコードを自動変換するようにしてみました。

以下子テーマのfunctions.phpに追加しました。

//////////////////////////////////////////////////
//preタグ内の<,>,&をエンコードする
//////////////////////////////////////////////////
function auto_code_filter($html) {
	
	// preタグにクラスがある場合もOK
	$html = preg_replace_callback( '/(\<pre.*?\>)(.+?)(\<\/pre\>)/s', function ($matches) {
		return $matches[1].htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8', $double_encode = false).$matches[3];
	},  $html );
	
	return $html;
}

add_filter('the_content', 'auto_code_filter');

コードを追加してから確認してみたところ、すべてのコードで上手くハイライト表示されており、無事に乗り換えが完了しました。

コメント

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