現状・条件
プログラムコードなどをハイライトするためよく使用する Enlighter ですが、WordPress 環境が変わると場合によって プレーンテキスト ( Plain Text ) に表示される事があったのでその原因や対処方法をメモとして残しておきます。
バージョン情報
本記事は下記の環境が条件です。
- WordPress バージョン:5.2.3
- テーマ名:Cocoon バージョン:1.9.9.5.3
- Enlighter – Customizable Syntax Highlighter バージョン 3.10.0
ケーススターディ
- Case Study #1使用中のテーマの設定の違いによって発生するケース
・現象:
全てのプログラムコードがハイライトされない。・対処:
Cocoon テーマ の「高速化」機能の中で「JavaScriptを縮小化する」にチェックを入れて有効化した場合、その下の縮小化しない JavaScript ファイルのパスとして、EnlighterJS.min.js と mootools-core-yc.js を改行区切りで入れて置くと正常にハイライトされます。
- EnlighterJS.min.js と mootools-core-yc.js 以外は指定しなくても動作します。
- 上記の2つのファイルを追加する方法とは別に、プラグイン全体を指定しても動作します。その場合は 代わりに /plugins/enlighter を入力します。
- 「CSSを縮小化する」の縮小化除外 CSS ファイルにはデフォルトの空欄ままで良いです。
- Case Study #2他プラグインの干渉によって発生するケース
・現象:2つの問題が発生しました。
#1) 複数のプログラムコードの中で、一部だけがハイライトされない。
#2) プレーンテキストしか表示されない。・対処 # 1:
プラグイン本家の FAQ などによると、Cache 系、Optimize 系のプラグインの 干渉 でよく生じる問題のようです。当サイトの場合は、下記の2つのプラグインを使用していましたので削除しました。
WP Fastest Cache
WP-Optimize – Clean, Compress, Cache・結果:
一部だけがハイライトされない問題は解決されましたが、プレーンテキスト表示のまま!でした。・対処 # 2:
当サイトのスピードアップのため入れていた Async JavaScript というプラグインを削除したら問題なく表示されました。
まとめ
Enlighter のハイライト機能が効かなかったら、JavaScript をコントロールする テーマの機能 や プラグイン を停止または削除しながらデバッグすることは有効でした!
コメント