【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う

by
このエントリーをはてなブックマークに追加

【Javascript】SyntaxHighlighter 3.0 の新機能と注意点
https://blog.delphinus.dev/2010/07/new-function-of-syntaxhighlighter-3.html

SyntaxHighlighter を Movable Type で使うプラグインには次のものがある。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter for Movable Type | kwrogu
http://blogspot.makotokw.com/portfolio/movabletype/syntaxhighlighter/
SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/

これは SyntaxHighlighter 2.x にしか対応していないのだが、最新版の 3.0.83 で無理矢理動かしてみた。

実際の使用例

これが、

[code:python;highlight:[4,8,12];title:Python クックブック 2.23 より]
try:
    from msvcrt import getch
except ImportError:
    # WindowsではないのでUnix的なアプローチを試みる
    def getch():
        import sys, tty, termios
        fd = sys.stdin.fileno()
        old_settings = termios.tcgetattr( fd)
        try:
            tty.setraw( fd )
            ch = sys.stdin.read( 1 )
        finally:
            termios.tcsetattr( fd, termios.TCSADRAIN, old_settings )
        return ch
[/code]

こうなる。

try:
    from msvcrt import getch
except ImportError:
    # WindowsではないのでUnix的なアプローチを試みる
    def getch():
        import sys, tty, termios
        fd = sys.stdin.fileno()
        old_settings = termios.tcgetattr( fd)
        try:
            tty.setraw( fd )
            ch = sys.stdin.read( 1 )
        finally:
            termios.tcsetattr( fd, termios.TCSADRAIN, old_settings )
        return ch

1. ヘッダーにスタイルシートを追加

サイトのヘッダーに SyntaxHighlighter のテーマを表すスタイルシートを追加する。デザインテンプレートをいじるといいだろう1。

<link rel="stylesheet" href="/sh30/styles/shCoreDefault.css" type="text/css" />

2. スクリプトを追加

SyntaxHighlighter の設定及び起動を行うスクリプトをおく。これもデザインテンプレートをいじると良い。サイトのパフォーマンスを重視するなら &lt;/body&gt; タグの直前に置くのがいいらしいよ。

javascriptは最後（&lt;/body&gt; の直前）に置く。 | サイト速度改善のコツ
http://sitespeed.blog24.fc2.com/blog-entry-5.html 

<script type="text/javascript" src="/sh30/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh30/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="/sh30/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash      /sh30/scripts/shBrushBash.js"
     ,"css      /sh30/scripts/shBrushCss.js"
     ,"diff     /sh30/scripts/shBrushDiff.js"
     ,"perl pl  /sh30/scripts/shBrushPerl.js"
     ,"plain    /sh30/scripts/shBrushPlain.js"
     ,"sql      /sh30/scripts/shBrushSql.js"
     ,"python py    /sh30/scripts/shBrushPython.js"
     ,"html xml xhtml   /sh30/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh30/scripts/shBrushJScript.js"
);
SyntaxHighlighter.all();
</script>

サイトで使用する可能性のあるコード定義ファイルを並べておく。このうち必要なものだけがロードされる。利用可能な言語（の略号）とファイルの一覧はこちら。

SyntaxHighlighter – Bundled Brushes
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3. プラグインへのパッチ

最後に、Plugin.pm に細工して、title やその他のオプションを使用可能にする。

*** Plugin.pm.orig  2010-07-20 14:45:43.000000000 +0900
--- Plugin.pm   2010-07-20 14:52:44.000000000 +0900
***************
*** 194,200 ****
      my ($class,$code,$version) = @_;
      if ($version eq '') { $version = '1.5'; }
      if ($version=='2.0') {
!         return "<pre class='brush: $class'>".MT::Util::encode_html($code)."<\/pre>";
      } else {
          return "<pre name='code' class='$class'>".MT::Util::encode_html($code)."<\/pre>";
      }
--- 194,216 ----
      my ($class,$code,$version) = @_;
      if ($version eq '') { $version = '1.5'; }
      if ($version=='2.0') {
!         my @s_class = split /;/, $class;
!         my %params;
!         $params{brush} = shift @s_class;
!         my $title = "";
!         for (@s_class) {
!             my ($k, $v) = split /:/;
!             if ($k eq "title") {
!                 $title = " title='".MT::Util::encode_html($v)."'";
!             } else {
!                 $params{$k} = $v;
!             }
!         }
!         my $p = "";
!         while (my($k, $v) = each %params) {
!             $p .= "$k:$v;";
!         }
!         return "<pre class='$p'$title>".MT::Util::encode_html($code)."<\/pre>";
      } else {
          return "<pre name='code' class='$class'>".MT::Util::encode_html($code)."<\/pre>";
      }
***************
*** 207,213 ****
      if (UNIVERSAL::can($ctx, 'stash') and my $blog_id = $ctx->stash('blog_id')) {
         #$version = $plugin->get_config_value('syntaxhighlighter_version',"blog:".$blog_id);
      }
!     $text =~ s/\[code:([\w#+-]+)\](.*?)\[\/code\]/&sh_transform($1,$2,$version)/esg;
      return $text;
  }
  
--- 223,229 ----
      if (UNIVERSAL::can($ctx, 'stash') and my $blog_id = $ctx->stash('blog_id')) {
         #$version = $plugin->get_config_value('syntaxhighlighter_version',"blog:".$blog_id);
      }
!     $text =~ s!\[code:([^[\]:;]+(?:;[^[\]:;]+:(?:[^[\]:;]+|\[[^[\]:;]+\]))*)\](.*?)\[/code\]!&sh_transform($1,$2,$version)!xesg;
      return $text;
  }

後は、Apache を再起動すれば利用可能になるだろう。

おまけ

ハイライトした場所の正規表現が非常に複雑なので、覚え書きを置いておく。

$text =~ s!
    # 始まり
    \[code:
        # キャプチャ開始
        (
            # 大括弧とコロンとセミコロン以外の文字
            [^[\]:;]+
            (?:
                # セミコロン
                ;
                # 大括弧とコロンと（以下略）
                [^[\]:;]+
                # コロン
                :
                (?:
                    # 大括弧と（以下略）
                    [^[\]:;]+
                    # あるいは
                    |
                    # 大括弧で囲まれた、
                    \[
                        # 大括弧と（以下略）
                        [^[\]:;]+
                    \]
                )
            # 以上のものが 0 回以上繰り返す
            )*
        # キャプチャ終了
        )
    \]
    # コード本体
    (.*?)
    # 終わり
    \[/code\]
!
    &sh_transform($1,$2,$version)
!xesg;
  1. SyntaxHighlighter 3.0 を“サイトトップ/sh30”に解凍した場合。以下同様。 ↩

One thought on “【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う”

コメントを残す