murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

ソースコードを整形表示するプラグインSyntax Highlighter for WordPress ビジュアルエディタにも対応

PHPなどのソースコードをWordPressで見やすく表示するのに使ってるプラグインが Syntax Highlighter for WordPress。例えばphpなんかを次のように表示できる。

<?php
	phpinfo();  // PHPの情報を表示
?>

使い方は、プラグインをインストールして、編集画面で次のようにソースコードをショートコードで囲むだけ。

[言語名]
ここにソースコードを書く
[/言語名]

言語名は php, javascript, html, cpp など色々な言語に対応している。 .htaccess など対応していない言語は言語名にplain と書けばいい。

ビジュアルエディタ TinyMCE に対応

Syntax Highlighter for WordPress Ver.2.0.2 はTinyMCEで二重エスケープされる問題があったのだが、作者のをかもとさんに要望したところ速攻で修正したVer.2.1.364を公開してくれた。さっそくインストールしたところ、ビジュアルエディタ上でもばっちり使えた

エスケープのオンオフは自動で行われるが、万が一誤動作するときは引数encode=”true”または”false”とすれば強制的にオンオフできるようだ。

Ver.2.1.364では他のショートコードへの影響も改善されている。この対策は大変そうだなあと思っていたが、ソースコードを覗いてみたら呼び出し方法が大幅に修正されていた。短時間で直してしまうとはさすが。

しかしまだ、インデントのスペースやTABコードがビジュアルエディタで除去されてしまう問題が残っている。TinyMCEが無駄な空白を自動的に除去してしまうためだ。TinyMCEを直さないとならないが、とりあえずTABコードを出力するショートコードを自作して回避した。スマートな解決方法ではないが。ぐぐったらTinyMCEのこのおせっかい変換機能を無効にする方法が色々あるようなので、詳しくはまた今度紹介したい。

自分はビジュアルエディタ TinyMCE を好んで使っているため、次のようにソースコードが二重にエスケープされてしまった

そこで Syntax Highlighter for WordPress Ver.2.0.2 の syntax_highlighter.php の301行目を $inTxt → $content に修正した。こうするとビジュアルエディタで二重にエスケープされることなく、正しく表示される。

Syntax Highlighter for WordPress Ver.2.0.2 の注意点

このプラグインのソースコードを見たところ、do_shortcode()関数のフィルタのプライオリティを11から1に変更しているようだ。そのため Syntax Highlighter for WordPress をインストールすると、他のショートコードの動作に影響が出る場合もある。改行を自動的に挿入する処理がショートコードの処理の後にされるなど。他にもショートコードを使っているときは注意しよう。

Syntax Highlighter for WordPressのサイト

作者のサイト Syntax Highlighter for WordPress
ダウンロードや詳しい使い方 WordPress Plugins/JSeries > Highlighter for WordPress

関連しているかもしれない記事


投稿者: 村上 和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

3件のコメント

  1. トラックバック: ソースコードを表現するプラグイン『Crayon Syntax Highlighter』を入れてみた | Digi-Cyber.net

  2. さっそくインストールしました。ありがとうございます。
    記事も修正しました。

  3. ども、Syntax Highlighter for WordPress 作者のをかもとです。

    ご指摘の件を修正し、Syntax Highlighter Ver.2.1.x に対応させた Ver.2.1.364 をリリースしました。
    よろしければバージョンアップしてお試しください。
    http://wppluginsj.sourceforge.jp/syntax-highlighter/