Crayon Syntax Highlighterを条件によってハイライト表示しないようにするカスタマイズ方法

先日、当サイトをようやくAMP対応させました。

このサイトで使用中のWordpressテーマ自体に、設定1つでAMP化出来る機能はありました。けれど、何で今までしなかったかというと、当サイトは、WordpressプラグインのCrayon Syntax Highlighterを利用して、多数プログラムコードをハイライト表示させていたからです。

Crayon Syntax Highlighterでハイライト表示させると、<textarea>を利用して出力します。AMPではtextareaは利用できないため、これがAMPエラーの原因となります。

The attribute 'style' may not appear in tag 'textarea'.

なので、プラグインを利用したままAMP化させても「AMPエラーだらけ状態」になってしまいます(AMPエラーの無いページにとっては問題ないと思うけど大量エラーが出ると心情的に気持ち悪い)。ですので「Crayon Syntax Highlighterのコード調べてAMPページで適用しないようにしてからAMP対応しよう」なんてことを思っていたら、面倒くさくてそのまま放置していました。

で先日ようやく、年に数回訪れるという「面倒くさいことをやれそうな気がする日」が訪れたので、調べてみたら、なんだか「うまいことCrayon Syntax Highlighterを動作させないコード」が書けたので、備忘録がてら紹介です。

スポンサーリンク
レクタングル(大)広告

WordPressでハイライト表示を制御するコード

Crayon Syntax Highlighterのコードハイライト表示を制御するには、functions.phpに以下のように記入します。

WordPressのfunctions.phpを編集する前には、事前にバックアップしておいてください。

AMPページではハイライト表示させない例

「//:your-domain/xxxxxxx/?amp=1」といったパラメーター付きのURLでAMPページを生成している場合の「AMPページではCrayon Syntax Highlighterを適用しない」コードは以下。

とりあえず、AMPエラーチェックでも問題なく動作しています。

The AMP Validator

「//:your-domain/xxxxxxx/amp/」といったURLでAMPページを表示させている場合は、URLに合わせて条件分岐を変更する必要があります。

特定のページでハイライト表示させない例

個別の投稿ページでCrayon Syntax Highlighterを適用させたくない場合、以下のように書きます。

まとめ

今回の方法は、とりあえずCrayon Syntax Highlighterのコードを調べ、不要そうなフィルターフックを取り除いたら、たまたまうまくいった方法です。詳しい仕組みまでは調べていません。

ですので、今後Crayon Syntax Highlighterの仕様変更などで、動作しなくなる可能性もあるのでご了承ください。

ということで、「AMP対応機能(プラグイン)を使用してAMP化したけどCrayon Syntax Highlighterを利用しているページてエラーが出る」なんて場合は、今回紹介したコードで改善出来るかもしれません。

サイト Crayon Syntax Highlighter — WordPress Plugins

今回紹介した機能は、Simplicity最新版にはデフォルトで備わっているのでカスタマイズ不要です。