ソースコードをハイライト表示するプラグインを作成

ソースコードをハイライト表示するプラグインを作成WordPress用にソースコードをハイライト表示するプラグインを作成した。

コードのハイライト表示について

function wp_sh_setting_link( $links, $file ){
 	static $this_plugin;
 	if ( ! $this_plugin ) $this_plugin = plugin_basename(__FILE__);
 	if ( $file == $this_plugin ){
 		$settings_link = '<a href="options-general.php?page=wp-syntaxhighlighter-options">'.__('Settings', 'wp_sh').'</a>';
 		array_unshift( $links, $settings_link );
 	} 
 	return $links;
}

「WP SyntaxHighlighter」という名称で現在、公開中である。

Ver.1.0.1 2011/05/03

最新の「WP SyntaxHighlighter」をダウンロード

作成したと言っても「SyntaxHighlighter」というJavaスクリプトで記述されたライブラリを利用しているだけで、コアの処理は「SyntaxHighlighter」ライブラリ任せである。

同様の「SyntaxHighlighter」ライブラリを利用するプラグインは、数多く公開されているが、新しいバージョンのライブラリを搭載し、比較的、有名なプラグインとなると、

あたりに限られるだろう。

「SyntaxHighlighter」ライブラリ、本来の仕様では「<pre>」や「<script>」タグを使って、ハイライト表示させるコードを指定するようになっているが、上の2つのプラグインは、ショートコードで指定する方式を採用している。

WordPressのビジュアルエディターでは、「<pre>」タグはともかく、「<script>」タグは簡単に入力する手段がなく、むしろタグではないショートコードの方が扱いやすい。

そのような理由もあり、WordPressでは、この手のプラグインの多くが、ショートコード採用している。

しかし、私が作成したプラグインでは、「<pre>」タグで指定する方式を採用した。

この方法ならば、ショートコードに関する処理を記述する必要もなく、処理の大部分を「SyntaxHighlighter」ライブラリに依存でき、プラグインの記述も大幅に楽になる。

「<pre>」タグに拘る理由としては、このような消極的な理由の他に、タグで指定した方が、後々都合が良いという積極的な理由もある。

例えば、ソースコードのハイライト表示を使わなくなり、プラグインを無効化した場合でも、過去の投稿の中のコードも、一応は表示されるし、スタイルシートでレイアウトすることも可能だ。

「<pre>」タグを使う場合の問題は、ビジュアルエディターからどのように「<pre>」タグを入力するかと言う点だが、標準での唯一の方法が「整形済み」を使う方法である。

整形済み

「整形済み」に指定したコードは、自動的にエスケープされ、その点は都合も良いのだが、何分「<pre>」で囲まれるだで、calss属性の指定が要求される「SyntaxHighlighter」ライブラリには不都合である。

かと言って、一々、HTMLエディターに移動してclass属性を入力するのも馬鹿、馬鹿しい。

そこで、この問題を解決するために「SyntaxHighlighter TinyMCE Button」というプラグインを作成した。

Ver.0.1.1 2011/05/01

最新の「SyntaxHighlighter TinyMCE Button」をダウンロード

「SyntaxHighlighter TinyMCE Button」は、ビジュアルエディターに「<pre>」を入力するためのボタンを追加する。

と言っても「CodeColorer TinyMCE Button」を少し弄っただけだが、独自の機能も実装している。

ビジュアルエディタの欠点の1つが、タブによるインデントが無効化されることだが、このプラグインの機能を使えば、一旦「<pre>」タグで囲んでしまえば、「<pre>」タグで囲まれたソースコードの部分は、タブによるインデントが可能となる。

本当は、ビジュアルエディターにソースコードをペーストした瞬間にタブが無効化される問題を解決したかったのだが、これは実現出来なかった。

少なくとも、このプラグインでは、後でタブによる整形が可能となっている。

「<pre>」タグを入力すると言っても、けして汎用のものではなく、「SyntaxHighlighter」ライブラリに、完全に特化している。

SyntaxHighlighter TinyMCE Button

そのため、ボタンをクリックした際に、言語の指定などが必要になる。

最初は、殆どのパラメーター設定が可能な、もっと複雑なものを作成したのだが、最終的にシンプルなものに落ち着いた。

行番号の表示/非表示の選択も要らないかもしれないと思っている。

「SyntaxHighlighter TinyMCE Button」は、「WP SyntaxHighlighter」から独立したプラグインとなっているが、汎用的に「SyntaxHighlighter」ライブラリを採用するプラグインで使えるかと言えば、微妙かもしれない。

将来的に「WP SyntaxHighlighter」に実装してしまう可能性も高い。

「SyntaxHighlighter」ライブラリでは、各言語に対応した「ブラシ(言語定義ファイル)」を読み込む必要があるが、この制御をプラグイン側で動的に行なっている場合も少なくない。

ちなみに私のプラグインでは、動的な「ブラシ(言語定義ファイル)」の読み込みを「SyntaxHighlighter」ライブラリに依存している。

そのようなプラグインでは、ショートコードのみを認識してる場合が多いので、「<pre>」ダグで書いても対応する「ブラシ(言語定義ファイル)」読み込まれないかもしれない。

全ての「ブラシ(言語定義ファイル)」を予め読み込むか、「SyntaxHighlighter」ライブラリの動的読み込み機能に依存してる、または機能として残しているプラグインなら「SyntaxHighlighter TinyMCE Button」は役立つだろう。

ちなみに「SyntaxHighlighter Evolved」との組み合わせなら、「SyntaxHighlighter Evolved」側の設定によっては機能するが、「Syntax Highlighter for WordPress」との組み合わせでは、「SyntaxHighlighter TinyMCE Button」は役に立たない。



WordPress, ネット・PC, 自作アプリ, , Permalink