＜と表示したいのに<に変換される問題はCrayon Syntax Highlighterが原因、その解決方法

この記事の読了時間は約5分です。

記事内にコードを貼り付け、<と表示させたいのに&lt;に勝手に変換されてしまう問題に直面したのでその解決策。

<と&lt;問題のキッカケ

過去記事　Googleカレンダーで変則シフトを簡単に登録する方法を実践！初心者用に解説・注意点

コメントでkawaさんから、記事内のコードをコピペしても動作せずエラーが出ると報告があった。記事内のコードを見てみると、<と表記しなければならない所が、&lt;に変換されてしまっていた。

<と&lt;問題はなぜ起こる？

普通は問題にならない

この<と&lt;問題は、wordpressのビジュアル編集画面では通常問題にならない。

ビジュアル編集で<と入力すれば、テキストでは&lt;と入力されているし、

ビジュアル編集で&lt;と入力すれば、テキストでは&amp;lt;と入力されている。

参考 &lt;や&gt;をそのまま文字として表示する方法 – くようの記録帳

Crayon Syntax Highlighterが原因

今回の問題は、Crayon Syntax Highlighterというプラグインが原因。

コードを編集して見やすく記事内に設置できるのがウリだが、<と表示させたいのに自動で&ltに変換してしまう機能が問題を起こしていた。

原因分析の結果

今回の問題は、

1. テキストにコードコピペ（<含む）
2. 記事更新（ビジュアル画面は一度も開かない）→投稿記事でも正常に<が表示される
3. その記事編集画面のテキストからビジュアルに切り替える（<が表示されている）
4. この時、Crayon Syntax Highlighterがビジュアルの<を自動で変換してしまい、テキストにコピペした<が&lt;になってしまう。そして、それが反映される。

という流れで起こっていた。

<と&lt;問題の解決方法

Crayon Syntax Highlighterをアンインストールする

使いにくいプラグインはアンインストールするのが一番簡単です。

参考highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適 | エス技研

テキスト画面でコードをコピペし、ビジュアルは一度も使わない

対処療法になりますが、テキスト画面でコピペした後に、ビジュアル画面にいかなければ<と表示されます。とりあえず、この作戦で正常に表示させておいて、次の自動変換機能をストップさせる方法に取り組めばいい。

Crayon Syntax Highlighterの自動変換機能をストップする

根本的な解決策。勝手に変換してしまう部分をコードいじって止めちゃおうという方法。

参考Crayon Syntax Highlighterで勝手にエスケープされる時の対処法 | milkyshade

参考Crayon Syntax Highlighterでが&lt,&gtに変換される時の対処法 | Unity開発&備忘録

 

やることは２つ。

プラグインを編集

Crayon Syntax Highlighter > 「crayon-syntax-highlighter/crayon_formatter.class.php」を開いて、

$code = CrayonUtil::htmlspecialchars($code);

を

//$code = CrayonUtil::htmlspecialchars($code);

にする。

FTPソフトで編集

http:自分のサイトのURL/public_html/wp-content/plugins/crayon-syntax-highlighter/langs/default/operator.txtを開き、

「&=」や「=&」「&」を「#&=」「#=&」「#&」にする。

結果と課題

なんとか解決

テキスト画面で「crayon」を押してコードを貼り付けると、テキストでは&lt;、ビジュアルでは<と表示され、記事は<が表示されるようになった。

そのときのコードは<pre class=”lang:default decode:true “></pre>

このdecode:trueが大事なよう。

「decode:true」の場合は、「&lt;」は「<」に変換されて表示されます。
「decode:false」の場合は、これが変換されずにそのまま表示されます。

WordPressのCrayon Syntax Highlighterの使い方 | エス技研

残された課題

<pre></pre>と自分で入力した場合は、テキストでは&lt;、ビジュアルでは<と表示され、記事は&lt;が表示されるまま。どこをいじれば<pre>コード内でも上手く表示されるようになるのかわからない。

あと、<pre class=”lang:default decode:true “></pre>を使えば、「Crayon Syntax Highlighterの自動変換機能をストップする方法」を使わなくても、問題が解決出来たかどうかは検証していないため不明。

もうややこしすぎて僕の手には負えないorz

---

この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/andlt-crayonsyntaxhighlighter/">＜と表示したいのに&lt;に変換される問題はCrayon Syntax Highlighterが原因、その解決方法</a>