【CrayonSyntaxHighlighter】＜＞（大なり小なり）が&ltや&gtに変換される時の対処法

2016年1月26日 2016年1月26日 5分45秒

memory

先日、Crayon Syntax Highlighter を使って記事にコードを貼り付けたのですが、完成した記事を確認したところ「<」「>」で書かれた部分だけが「<」「>」に変換されてしまっていました。

これでは正しいコードを紹介できないので、今回は自動変換機能をなくす方法を紹介します。

< 目次 >

1 はじめに
2 コードが自動変換される
3 自動変換しないようにする
4 まとめ

はじめに

まず、「CrayonSyntaxHighlighter」について紹介します。
これはWordPressのプラグインなのですが、このプラグインを導入することによって記事にコードを貼ることができるようになります。

Crayon Syntax Highlighter の導入はとても簡単で、
プラグイン > 新規追加 > Crayon Syntax Highlighter
と検索しインストールするだけで導入完了です。

あとは、表示されるコードの色などを調整するだけです。
実際にコードを貼り付けると以下のようになります。

実際にコードを記事に書き込む時には「<pre>（コード）</pre>」というように<pre>で囲んであげるだけでコードとして認識してくれます。

コードが自動変換される

コードを表示してみるとわかるのですが「=>」など書き込んであるコードの場合、実際の記事で表示されるのは「=>」というように変換されてしまいます。
この機能はCrayon Syntax Highlighterについている機能で、自動で<を変換するというものらしいです。

この機能をなくすためにはCrayon Syntax Highlighter を構成しているコードを書き換える必要があります。
コードをコメントアウトするだけなのでとても簡単ですが、今回の作業は全て自己責任で行ってください。

自動変換しないようにする

ではコードをどのように修正すればよいか説明していきます。
プラグイン > プラグイン編集 > Crayon Syntax Highlighter > 「crayon-syntax-highlighter/crayon_formatter.class.php」を開きましょう。

※ここからコードの編集に入ります。必ずバックアップを取った後で行ってください。

 /* Convert <, > and & characters to entities, as these can appear as HTML tags and entities. */
if ($escape) {
  $code = CrayonUtil::htmlspecialchars($code);
}

このように書かれたコードを「command + f」の検索などで探してください。私の場合は554行目にありました。
($escape){}内のコードを以下のように書き換えてください。

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

具体的にはこの行をコメントアウトしているだけなのですが、これで<>は自動変換されなくなりました。
続いて、=&や&=などの場合は他にも編集する箇所があります。

CyberduckなどのFTPソフトを使って plugins > crayon-syntax-highlighter > langs > default > operator.text を開きましょう。
開かれたテキストの中に「&=」や「=&」「&」があるのでこちらもコメントアウトしましょう。

テキストのコメントアウトは「#」です。「#&」というようにして3箇所編集しましょう。
これで「&」の自動変換もなくなりました。

Crayon Syntax Highlighter を使ってコードを表示した記事を確認してみてください。
<>や=&が正しく表示されていたら完了です。

まとめ

ブログにコードを貼るプラグインは、プログラミングの記事などを書いていると必須になってきます。
基本的に自分のコードを紹介する時にコードを貼り付けるので、勝手に書き換えられてしまうと正しいコードを伝えることができなくなります。

場合によっては、その記事を読んだ人がコピペして編集してしまい、500エラーを起こすということにもなりかねません。
正しいコードを紹介するのはとても重要なことなので、今回のような自動変換機能が必要ない場合は無くしてしまいましょう。