TRIPLEXXX

ソースコードをサイトで表示するときに、キーワードなどを色付けして見やすい表示にする場合によく使われるのが syntaxhighlighter です。これを WordPress でも利用できるようにプラグインにしたものが SyntaxHighlighter プラグインです。そのままでも手軽に使えて便利ですが、表示のオプションを自由に指定できるようにカスタマイズします。

カスタマイズの内容

オリジナルの syntaxhighlighter は、name="code"の属性を指定した pre，textarea の DOM 要素に作用します。また、言語の種類やオプションをclass="html:collapse"のように class の値で指定します（使い方を参照）。

変更したい点:

• name は XHTML では id に代わるので使いたくない。
• class にコロン（：）区切りでオプションを指定したくない
• 対象タグは pre，textarea よりも pre，code にしたい。

SyntaxHighlighter プラグインでは、エントリ本文中に以下のようなプレースホルダでコードを囲みます（使い方を参照）。エントリが表示されるときにフィルタでフックして、プレースホルダを syntaxhighlighter の仕様にあわせた pre タグに変換します。

エントリ記述例:（※実際は半角のカッコを使います）

［code="css"］background-color: #123456;［/code］

変換例:

<pre name="code" class="css">background-color: #123456;</pre>

変更したい点:

• 言語以外の以下のオプションも指定したい。
  • 行番号の有無
  • 開始行番号
  • ツールバーの有無
• リストの表示（＋開く）/非表示（－閉じる）を切り替えたい。
• 1行だけの表示を簡単に可能にしたい。
• インライン表示を可能にしたい。

カスタマイズ仕様

プレースホルダは以下の書式とします。

［code="言語 オプション1 オプション2･･･"］コード［/code］

言語の種類は、本家を参照してください。オプションは、オリジナルのものと、追加したものをあわせて指定できるようにします。

オリジナルのオプション:

• nogutter　･･･　行番号欄を非表示にします。
• nocontrols　･･･　ツールバーを非表示にします。
• showcolumns　･･･　リストの初めにカラムを表示します。
• collapse　･･･　リストを閉じて表示します。ツールクリックでリストが開きます。オリジナルは1度開くと開きっぱなしですが、自由に開閉できるようにします。
• first-番号　･･･　行番号の開始番号を指定します。オリジナルの書式は first[番号] ですが、これをクラス名に指定したくないので変更しました。

オリジナルのオプション:

• simple　･･･　行番号欄、ツールバーともに非表示。
• span　･･･　インライン表示します。

WordPressプラグインのカスタマイズ

syntaxhighlighter.php:

• GetBBCode() 関数の正規表現にオプションの内容を追加します。

  $regex .= '((\s+(span|simple|nogutter|nocontrols|collapse|showcolumns|firstline\-[0-9]+))*)';

• 正規表現でマッチしたソースコード部分のインデックスを随所で「5番目」と決め打ちしているので、変数にしておきます。正規表現を変更したのでインデックス値も変わります。

  var $match_code = 8;
  var $match_lang = 4;
  var $match_opt = 5;
  　　：
  $match[5]
  　　↓
  $match[$this->match_code]
  

• タグ生成の箇所で、span オプション指定なら code タグ、それ以外は pre タグにします。また、name="code"をクラスへ変更します。

  $content = str_replace( $match[0], '<pre name="code" class="' . $language . ～
  　　↓
  $opt = $match[$this->match_opt];
  $tag = strpos($opt, 'span') ? 'code' : 'pre';
  $content = str_replace( $match[0], '<' . $tag . ' class="code ' . $language . $opt . ～
  

syntaxhighlighterのカスタマイズ

WordPressプラグインSyntaxHighlighter に同梱されている shCore.js は、コメントやスペースが除かれていて読みにくいため、オリジナルを使いましょう。以下に変更の要点を説明します。

shCore.js:

• 適用対象である code の値を持つ属性を name から class に変更します。

  if(tags[i].getAttribute('name') == name)
  　　↓
  if(tags[i].className.indexOf(name) != -1)
  

• オプション区切りをコロン（：）からスペースに変更します。

  options = options.split(':');
  　　↓
  options = options.split(' ');
  

• 書式を firstline[番号]から firstline-番号に変更します。

  var regex = new RegExp('^' + name + '\\[(\\w+)\\]$', 'gi');
  　　↓
  var regex = new RegExp('^' + name + '\\-(\\w+)$', 'gi');
  

• 対象要素を textarea から code に変更します。

  	FindTagsByName(elements, name, 'textarea');
  　　↓
  	FindTagsByName(elements, name, 'code');
  

• インライン表示のために各所を変更します。asSpan の記述全般です。

  dp.sh.Highlighter = function()
  {
  　　：
    this.asSpan = false; // 追加
  　　：
  

• collapse 指定時にソースリストを開閉できるようにします。

  sender.parentNode.removeChild(sender);
  highlighter.div.className = highlighter.div.className.replace('collapsed', '');
  　　↓
  if(highlighter.div.className.indexOf('collapsed') != -1){
    highlighter.div.className = highlighter.div.className.replace('collapsed', '');
    sender.innerHTML = '－source';
  }
  else{
    highlighter.div.className = highlighter.div.className + ' collapsed';
    sender.innerHTML = this.label;
  }
  

インライン表示時の不具合修正

span オプションでインライン表示する場合は、code タグに変換しているのですが、WordPressのエディタのタグ自動補完機能によりソースコードの最後に<br />が付いてしまいます。これを回避するために、WordPress のファイル wp-includes/formatting.php を修正します。

1. function clean_pre() と同じ処理を code タグ用に追加します。

   function clean_code($matches) {
     if ( is_array($matches) )
       $text = $matches[1] . $matches[2] . "</code>";
     else
       $text = $matches;
   
     $text = str_replace('<br />', '', $text);
     $text = str_replace('<p>', '', $text);
     $text = str_replace('</p>', '', $text);
   
     return $text;
   }
   

2. 上記関数を pre タグの処理後に呼び出します。

     if (strpos($pee, '<pre') !== false)
       $pee = preg_replace_callback(～
     //  以下を追加
     if (strpos($pee, '<code') !== false)
       $pee = preg_replace_callback('!(<code.*?>)(.*?)</code>!is', 'clean_code', $pee );
   

使用例

“php span”:

これはスパンif($hoge == 'hoge')の例です。

“php nogutter”:

if($hoge == 'hoge')

“php nocontrols”:

if($hoge == 'hoge')

“php simple”:

if($hoge == 'hoge')

“php collapse firstline-13″:

if($hoge == 'hoge')
  $hoe .= 'hoge';

ダウンロード

オリジナル:

SyntaxHighlighter

変更したファイル:

xxx_SyntaxHighlighter.zip (27KB)

以下のファイルが含まれています。

• shCore.js
• syntaxhighlighter.php
• SyntaxHighlighter.css
• formatting.php