今までこのブログのソースコードハイライトには、[Crayon Syntax Highlighter]というプラグインを利用していたのですが、これが長い間、更新が止まっているようです。しかもいつのまにか、半角スペースの表示が詰まって表示されていることに気づきました。
どうやら、Cocoonの高速化設定とバッティングしてしまっているそうです(Cocoonの高速化後のプラグイン不具合：スペースが消える【Crayon Syntax Highlighter】 | 40代からプログラミング！)。
何か変わりのプラグインはないかなと思って探してみたら、そもそもCocoonテーマに、コードハイライト機能があるとのこと(ソースコードをハイライト表示させる方法 | Cocoon)。
この指定にすることで、確かに今までpreタグで書いていたソースコード部分が問題なく利用できるようになっていそうなので、[Crayon Syntax Highlighter]を停止して、Cocoonのコードハイライト機能を有効化しました。
それから数日たって、Google Search Consoleから、カバレッジに問題があるという通知メールが来ました。どうも500エラーがでている記事があるとのこと。確かに見てみると、エラーになっていました。
おかしいなぁ。と思って、いろいろ編集してみると、preタグ内に書いていたコードに問題があるとのこと。どうやら、[Crayon Syntax Highlighter]はpreタグ内にHTMLタグカッコ(<>)を使うと、自動的にエンコードしてくれるため問題なかったのですが、Cocoonのコードハイライト機能はそのまま認識してしまうようです。
対応するには、「<」があると、「<」というように置換していく必要があるとのこと。
仕方ないので、一つずつ置換していこうとしたのですが、思ったより対応しなければいけないページが多い(たいして投稿していないつもりだったけど、100件近くあるよう)。単純な一括置換では対応できないので、手動で5ページほど対応してみたものの、さすがに時間がかかりすぎると判断して、[Crayon Syntax Highlighter]に戻し、CocoonのHTML縮小化設定もオフにしました。
プラグインだと自動エンコードしてくれるということは、うまいことやればfunctions.phpあたりで対応できるのではないかと思うけど、どうなんだろう…。うまい解決策がないものだろうか…。
2022/03/06 23:11追記：
下記ページを参考にfunctions.phpに追記することで対応できました！
参考：WordPressで、Crayon Syntax Highlighterを使用せずにPHPコードを画面に表示する | sakura*sakura
/**
* preタグの時は、コード解析せずにそのまま画面に表示する
*/
function the_content_code($text){
// preタグ用
$text = preg_replace_callback( '/(\<pre.*?\>)(.+?)(\<\/pre\>)/s', function ($matches) {
// HTMLエスケープ
return $matches[1].htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8', $double_encode = false).$matches[3];
}, $text);
return $text;
}
add_filter('the_content', 'the_content_code');
ただし、500エラーになったところは500エラーのままに…。どうやら、「<?」の記載がある箇所についてはエラーになってしまうよう。「Exec-PHP」という記事中でPHPを使う機能が影響しているよう。どこかの記事で影響がでるかもしれないけど、今は使ってないので停止することにした(調べてみるとセキュリティ的に問題があるようだし)。
コメント