Highlighting Code Blockでコードを認識してしまうバグを解決した話

WordPressプラグインのシンタックスハイライトで一番メジャーといっても過言ではない「Highlighting Code Block」。

今回はそんな「Highlighting Code Block（1.6.0）」を使用している際に起きたバグを解決した話をします。

結果としては、前日に自動アップデートされていた「Easy Table of Contents（2.0.35）」が原因だったのですが、
ここにたどり着くまでに、それはそれは遠回りをしました。

みなさんは遠回りをしないよう記事に書き留めておきます。

バグ確認の経緯と詳細

ことの発端は 2022/10/30 未明。

サイトを確認すると今まできっちりと表示されていたはずのJavascriptのコード達が1行に圧縮されていました。

しかも、特定のコード以降はなぜかpreで囲まれてデザインが崩れに崩れていました。

また、jsを書いていたのでコンソール側でimportに対するエラーが出ていました。

それにtemplateやstyleで囲まれた箇所は表示されない。。。

それどころか何も表示されていないコードブロックも存在する。

原因の探究

プラグインの停止

まずはプラグインを全て停止しました。

するとWordpressが死にました。
（リカバリーモードで復活しました）

ここで続ければよかったのですが、めんどくさくなったのでプラグイン問題はとりあえず無視しました。
（これが一番ダメ）

js問題の探究

コンソールでimportに対するエラーが出ているということはコードブロックに入れているはずのjsが読み込まれている。

jsが読み込まれているということはvue.jsに対してprismが効いていない可能性があるのでは？
（そんなわけない）

と思い、ないのを承知でprism.jsでVueを探すが、もちろんあるはずがない。。。

なので、一旦ejsのprismを入れます。

ちょっとマシになりましたが、全く解決しません。
（圧倒的気のせいです）

エラーログの確認

真っ白のページもあったため、wp_debugではなくサーバー上に保存されているerror_logを確認。

Noticeぐらいしか上がっていない。。。

記事を小分けにして入れていく

記事を小分けにして入れていけば原因のところでエラーが出るだろうと思い実行。

1回目のコードブロックでエラー。

そこから色々探索していくと、最初のh2でエラーが出ていることを確認。

h2の内容を変えてもエラーが出る。

もしや。。。

目次プラグインの停止

サイトに入れいている目次プラグイン「Easy Table of Contents」を停止。

ちゃんと表示される！

「Easy Table of Contents」の更新履歴を見に行く。

1日前

完全にこれだ。。。

原因

原因は「Easy Table of Contents」のアップデートによるものでした。

そして、プラグインの停止をめんどくさがったことが解決への時間を長引かせました。

ちなみに、アップデート内容はこんな感じです。

解決

「Easy Table of Contents」のバージョンを2.0.35から2.0.34に変更すると、
きっちりと「Highlighting Code Block（1.6.0）」が動くようになりました！

最後に

WordPressのプラグインは非常に便利ですが、別のプラグインをアップデートすることで他のプラグインが動かなくなることもあります。

そういった場合は、一つ一つ原因を確認しながら解決していくことが重要です。

それでは、よいWPライフを！