WordPressのSyntaxHighlighterを使うと無茶苦茶になるよ

WordPressのSyntaxHighlighterに関連するエントリを2つ書いてきましたが、前回、開始行番号を指定するためにコードを色々いじっていて気がついたことがあるので書きます。

以前のエントリ

SyntaxHighlighterを使うということで、プログラムコードを掲載しているわけなんですけど、プログラム中に、 < とか > とか & って文字を使いたくなりません?
なりますよね。

で、投稿欄に記事を書いてコードを書いて【公開】して、一般ページ側でとりあえず記事を読み直します。

あっ、このコードのここの部分書き直したいな。
って思うことありません?
ありますよね。

そこで問題が発生します。

ブログの管理画面から、さっき書いた記事を開いて再編集します。
ちなみに私は、【ビジュアル】でなく【HTML】を使ってます。

すると、 & と書いてたはずなのに、&amp; って勝手に変わっちゃってませんか?
私のところではそうなっちゃいます。

これはこれで別に構わないんですけど、構わないのは本文中だけなんすよ。
シンタックスハイライトのために、[code=’php’] [/code]って書いた内側の & まで変換されちゃったら困ります。

でも、SyntaxHighlighter を使わないWordPress自身には、&を変換する機能はもともと用意されていないんですよ。 & と書けば& とそのまま表示されちゃいます。
<div> hogehoge</div> ってちょこっとサンプルを書きたければ、&lt;div> hogehoge&lt;/div> とわざわざ書いてやらないと、HTMLタグが効いちゃって意図しない表示になります。それがWordPress本来の動作です。

それが、SyntaxHighlighter を適用すると、 & が &amp; に、&lt; が < のように変わっちゃいます。
しかも、プログラム中までご丁寧に変わっちゃいます。

どういうことかというと、
新規投稿時に、 <div> hogehoge</div> って書いて保存して、
再編集を開くと、 &lt;div> hogehoge&lt;/div> になり、気づかずに保存して
再度、再編集を開くと、&amp;lt;div> hogehoge&amp;lt;/div>
って、& が &amp; に、保存して再編集するたびに延々増えていきます。

で、こんなん使い物になるかーーー!!って。

まぁ 最初は、なんかおかしいなぁ程度だったんですけどね。
でも、毎回毎回、そんなだしうっとうしくなってきて。

で、先日、開始行番号の件で、ファイルをいじってたら偶然ですが、原因を突き止めたわけです。

ということで、以下、修正箇所です

次のファイルを編集します。
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

[code=’php:first[277]’]// Loop through each match and encode the code
// foreach ( (array) $matches as $match ) {
// $code = htmlspecialchars( $match[$this->match_code] );
// $code = str_replace( ‘&’, ‘&amp;’, $code );
// $code = str_replace( ‘&lt;’, ‘&amp;lt;’, $code );
// $code = str_replace( ‘&gt;’, ‘&amp;gt;’, $code );

// $content = str_replace( $match[$this->match_code], $code, $content );
// }
[/code] ※ 行番号は、WordPressのSyntaxHighlighterで開始行番号を指定する を適用したあとのものです。
何も変更をしていなかった場合は、該当の箇所を見つけてください。

で、上のように、コメントアウトします。
まぁ見ての通りですが、ここで、& を &amp; に変換しちゃってたんですよね。

これで安心して、一度確定させたページを何度でも修正できるようになります。

広告