[wordpress] WP-Syntaxプラグインを導入してみた

2009

01-02

23:07

[wordpress] WP-Syntaxプラグインを導入してみた

2009-01-03 11:31
行表示指定の有無で出力されるHTMLが異なるため，それぞれの場合に分けて記述しました．

はじめに

ブログへのアウトプットの際，ときどきJavaScriptのソースコードとかも載せたりしていますが，今まで，単なる pre タグを使っていたりしたわけで．．．

ブログに貼り付けたソースコードを分かりやすく見せたい！

というのはコードを書くブロガーなら誰でも思うはず。

最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。

何故かまとまった情報が無いようなので、まとめてみました。
http://blog.37to.net/2007/06/syntax_highlighter/

こんな思いを持ちながらも今まで何もしてこなかったので，今回の改装を機に，ちょっと気を遣ってみることにしました．

で，37toさんのこちらのまとめエントリ（上記）を一読し，よさげに感じた WP-Syntax プラグインを導入してみました．

WordPress › WP-Syntax « WordPress Plugins

使い方

使い方は非常にシンプル．pre タグに（プログラム）言語の種別を示す lang，開始行番号を示す line の各属性を指定し（line属性はオプション？），その中にソースコードを書いていくだけです．

<pre lang="言語の種類" line="開始行番号">
 
ここにソースコードを記述する
...
 
</ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->

# HTMLとして認識させる場合は，lang="html4strict" とする必要があるみたいです．

対応言語

シンタックスハイライトを行うためのphpライブラリ GeSHi を利用しているので，その仕様に従うようですね．

GeSHi – Generic Syntax Highlighter :: Home

対応している言語の種類がハンパないので，詳細は上記リンク先をご覧ください．

吐き出すHTML

行番号表示あり

例えば，「使い方」のところで示した簡単なHTMLソースコードの場合，次のように処理されて出力されます．

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</ pre></td><td class="code"><pre class="html4strict html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">pre</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;言語の種類&quot;</span> line<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;開始行番号&quot;</span>&gt;</span>
&nbsp;
ここにソースコードを記述する
...
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span> pre&gt;</span> <span style="color: #808080; font-style: italic;">&lt;!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります --&gt;</span></ pre></td></tr></table></div>
 
<!-- 閉じタグとして認識しないよう，</ pre>のように / の後ろにスペースを入れてあります -->

構造をまとめると，次のような感じになります．

<div class="wp_syntax">
  <table>
    <tr>
      <td class="line_numbers">
        <pre>
          行番号
        </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
      </td>
      <td class="code>
        <pre class=" ... " style=" ... ">
          ソースコードをシンタックスハイライトするように処理されたHTML
        </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
      </td>
    </tr>
  </table>
</div>

行番号表示なし

var konamicommand = [
  { code: 38 }  // ↑
, { code: 38 }  // ↑
, { code: 40 }  // ↓
, { code: 40 }  // ↓
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 66 }  // b
, { code: 65 }  // a
];

上記ソースコードの場合，次のようなHTMLが出力されます．

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> konamicommand <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span>
  <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">38</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↑</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">38</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↑</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">40</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↓</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">40</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ↓</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">37</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ←</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">39</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// →</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">37</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// ←</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">39</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// →</span>
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">66</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// b</span>
 
<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span> code<span style="color: #339933;">:</span> <span style="color: #CC0000;">65</span> <span style="color: #009900;">&#125;</span>  <span style="color: #006600; font-style: italic;">// a</span>
<span style="color: #009900;">&#93;</span>;</ pre></div></div>
<!-- 閉じタグとして認識しないよう，</ pre> のように / の後ろにスペースを入れてあります -->

構造をまとめると，つぎのようになります．

<div class="wp_syntax">
  <div class="code">
    <pre class=" ... " style=" ... ">
      ソースコードをシンタックスハイライトするように処理されたHTML
    </ pre> <!-- 閉じタグとして認識しないよう，/ の後ろにスペースを入れてあります -->
  </div>
</div>

ということで

//$( '.wp_syntax td.code' ).each( function() {  // <del datetime="2009-01-03T02:31:35+00:00"></del>
$( '.wp_syntax .code' ).each( function() {  // <ins datetime="2009-01-03T02:31:35+00:00"></ins>
  $( this ).click( function() {
    //
    // ソースコードの領域をクリックしたときの処理．
    // 選択したりできるとよさげ．
    //
  } );
} );