ソースコードを記載した記事を投稿したら表示崩れが発生した。
PCで見ると下記のような崩れとなっていた。
このサイトで重大なエラーが発生しました。
WordPressのトラブルシューティングについてはこちらをご覧ください。
という文言がページ下部に表示されております。
普段は記載しないソースコードの掲載が悪さをしていることはすぐにわかったが、原因はいったい何だったのか。
表示崩れの原因
原因は『Crayon Syntax Highlighter』というプラグインでした。
このプラグインはソースコードを綺麗に見せる、いわゆるソースコードハイライトのプラグインというものです。
実はこのプラグインは2019年1月時点で更新が止まってしまっているプラグインです。
以前は特に問題もなく使用できていて、今回久しぶりに使ったらたまたま気づきました。
解決方法
解決方法としては下記を行う必要があります。
- 『Crayon Syntax Highlighter』プラグインの無効化
- ほかのソースコードハイライトのプラグインのインストールと有効化
ソースコードハイライトのプラグインを変更するだけではダメで、『Crayon Syntax Highlighter』プラグインの無効化が必要でした。
たとえば『Highlighting Code Block』などほかのプラグインをインストールし差し替えてもエラーは出たままです。
エラーの条件としては、『Crayon Syntax Highlighter』が有効化状態で<pre>タグ使用している状態。
<pre>タグ箇所以降はエラーで表示されなくなってしまいます。
そのため、<pre>タグが使用されているプラグインを使用すると崩れてしまうのです。
プラグイン無効化後の弊害
無効化後は特に弊害はありませんでした。
過去に『Crayon Syntax Highlighter』を使用していたページは下記のようにプレーンテキストになってしまっていますが、見る分には弊害がないかなと。
もし表示崩れが発生したら、まずはプラグインの無効化を行えば取り急ぎはセーフで、
そのあとは順次ほかのプラグインに移植して行けば致命傷でないかなというのが私の感想です。
参考記事
参考にさせていただきました。ありがとうございます。
コメント