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

2008年8月12日（火）【WordPress(blog)】

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

以前のエントリ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// $content = str_replace( $match[$this->match_code], $code, $content );
// }

※ 行番号は、WordPressのSyntaxHighlighterで開始行番号を指定するを適用したあとのものです。
何も変更をしていなかった場合は、該当の箇所を見つけてください。

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

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