opRichTextareaSyntaxHighlightPlugin 作った

OpenPNE

http://github.com/balibali/opRichTextareaSyntaxHighlightPlugin

OpenPNE3 のリッチテキストエリア（現在、標準で使われているのは日記の本文の部分のみ）に、ソースコードを貼ったときにシンタックスハイライト（色付け）してくれるプラグインです。

インストール方法と使い方はとってもかんたんなので README.ja を見てください。

以下、内部の技術的な話。

opWidgetFormRichTextareaOpenPNE は、symfony の sfWidgetFormTextarea を拡張したものですが、TinyMCE によるリッチテキストエディタの機能を追加するとともに、自身で外部から拡張可能な機構を備えています(作者のid:ooharabucyou++)

拡張するにはまず opWidgetFormRichTextareaOpenPNEExtension を継承した独自のクラスを作成します。

opWidgetFormRichTextareaOpenPNEExtension には5つの拡張可能なメソッドが用意されています。

  • getPlugins()
  • getButtons()
  • getButtonOnClickActions()
  • getConvertCallbacks()
  • getHtmlConverts()

今回はリッチテキストエディタのボタンやアクションは増やさずに、表示処理だけ変更することにしたので、 getConvertCallbacks() メソッドだけを拡張しました。

getConvertCallbacks() は、キーにタグ名（今回の場合 op:source）、値にコールバック形式を持つ連想配列を返すようにしてやります。

# lib/widget/opRichTextareaSyntaxHighlightExtension.class.php
<?php
class opRichTextareaSyntaxHighlightExtension extends opWidgetFormRichTextareaOpenPNEExtension
{
  static public function getConvertCallbacks()
  {
    return array('op:source' => array(__CLASS__, 'toHtml'));
  }

  static public function toHtml($isEndtag, $tagname, $attributes, $isUseStylesheet)
  {
    ...
    if ($isEndtag)
    {
      ...
      $lang = $attributes['lang'];
      ...
      return sprintf('<pre class="brush: %s">', $lang);
    }
    else
    {
      return '</pre>';
    }
  }
}

コールバック関数側では や を置き換える HTML の文字列を返すようにします。第一引数の $isEndtag が false のとき開始タグを、true のとき終了タグを置き換える HTML を返します。

第三引数の $attributes を使えば のように属性値を与えて挙動を変えることができます。

最後に拡張したクラスを opWidgetFormRichTextareaOpenPNE::addExtension() で登録すれば一丁上がりです。

# config/config.php
<?php
opWidgetFormRichTextareaOpenPNE::addExtension('opRichTextareaSyntaxHighlightExtension');

以上、かいつまんで説明しましたが、このプラグイン自体は省略した部分も大した分量はないのでぜひ参考にして独自のプラグインを作ってみてください。