Crayon Syntax Highlightを使ったら<>が自動変換されてしまう
技術系ブログを書こうと思ったらやっぱりコードを載せないと話になりません。
コードの見栄えをよくするプラグインの中でもCrayon Syntax Highlightを使っている方も多い様ですね。
見た目も綺麗だし簡単に設置出来るしGUIでのサポートもあるので最高だ！と思っていたのですが、実はちょっとした罠が。
HTMLが自動返還されて変なことに
WordPressも元を正せばHTMLです。
記事の中にHTMLと思しき文字列があればそれは変なことになるのは目に見えていますが、コードエディタで<pre><code></code><pre>で囲ってやればなんとかそのまま表示する事ができました。
そう、Crayon Syntax Highlightをインストールするまでは。
実はCrayon Syntax Highlightは賢すぎてWordPressに仇なすHTMLのコードを自動で無害な文字列に変換してしまうのです。
Crayon Syntax Highlightをインストールした状態ではいくらpre, codeタグで囲っても自動保存が走ると勝手に<とかにあたかも文字化けしてしまったかの様に変換されてしまいます。
Crayon Syntax Highlightの中身をいじる手もあるが。。
なるべくCrayon Syntax Highlightはそのままにしておきつつ意図しない変換を抑制したい。
そんなときは<pre class=”lang:default decode:true “></pre>これです。
上記タグを自動で変換されてしまったコード部分を囲ってやるとエディター上では文字変換されている状態で表示されていますが、実際に記事を見てみると元のHTMLに戻っているのです！
このタグの意味するところは置き換えた文字列を元に戻しつつブラウザで表示するという効果がある様です。
しかもCrayon Syntax Highlightでの表示はそのままという望んだ形におさまっています。
まとめ
今回の方法ではCrayon Syntax Highlightに手を加えない以上、文字変換そのものを抑えることにはなっていませんし、都度対応する必要があります。
しかし、プラグインの中身を書き換えた場合、意図せずプラグインを更新などしてしまうと気づかない間に変換の魔の手に害されてしまっているかもしれません。
しかも、その影響は過去に書いた記事にまで波及してしまいます。
Crayon Syntax Highlightを使わないという選択肢もありますが、僕は現状今回の様な対応でやっていきたいと思っております。
そのうち掌を返すかもしれませんが。。
以上、今回はWordPressの記事に書いたHTMLが自動で変換されてしまった時の対処法でした！