CocoonテーマEnlighterWordPress HighlighterSyntax

Enlighter プラグインが上手く動作しない時のチェックポイント

Enlighter Cocoonテーマ
スポンサーリンク

現状・条件

プログラムコードなどをハイライトするためよく使用する Enlighter ですが、WordPress 環境が変わると場合によって プレーンテキスト ( Plain Text ) に表示される事があったのでその原因や対処方法をメモとして残しておきます。

plugin_enlighter_working
▲ NG:プレーインテキスト表示 ( Python Code )
plugin_enlighter_working
▲ OK:ハイライト表示 ( Python Code )

バージョン情報

本記事は下記の環境が条件です。

  • WordPress バージョン:5.2.3
  • テーマ名:Cocoon バージョン:1.9.9.5.3
  • EnlighterCustomizable Syntax Highlighter バージョン 3.10.0

ケーススターディ

現象・対処
  • Case Study #1
    使用中のテーマの設定の違いによって発生するケース

    現象
    全てのプログラムコードがハイライトされない。

    ・対処:
    Cocoon テーマ
    の「高速化」機能の中で「JavaScriptを縮小化する」にチェックを入れて有効化した場合、

    その下の縮小化しない JavaScript ファイルのパスとして、EnlighterJS.min.jsmootools-core-yc.js を改行区切りで入れて置くと正常にハイライトされます。

    plugin_enlighter_with_cocoon
    ▲ Cocoonテーマの設定
    • EnlighterJS.min.jsmootools-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 をコントロールする テーマの機能プラグイン を停止または削除しながらデバッグすることは有効でした!

スポンサーリンク

コメント

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