a-blogcmsでSyntaxHighlighter(3.0.83)を使ってソースコードをわかりやすく表示する

概要

SyntaxHighlighterを使うとソースコードを綺麗に表示できます。 a-blog cmsでスマートにSyntaxHighlighterを使うためにどうすればよいか考え、やってみたことを記録します。 テキストユニットの種類を選択するだけでhtml形式やcss形式など異なるソースを見やすく表示することができるようになります。 a-blog cmsのカスタマイズの知識とJavaScriptの知識が必要です。 対応するSyntaxHighligterのバージョンは 3.0.83 です。

SyntaxHighlighterをダウンロード

SyntaxHighlighter - Download 今回使用するバージョンは 3.0.83 です。

MITライセンスで使えるようです。 以前はもう少し厳しいライセンスだったような気がしましたがMITライセンスであればかなり自由に使うことができそうです。

こんな感じのファイル構成です。
この内必要なのは scripts と styles フォルダです。

コンフィグ＞編集設定＞テキストタグセレクト

テキストユニットの種類を選択するだけでSyntaxHighlighterを適用できるようにしたいので、SyntaxHighlighter用のテキストユニットを用意します。

このようにテキストユニットに選択できる項目を用意します。

「 pre.brush: js 」というように「 タグ名.クラス名 」という拡張記法を使用しているところがポイントです。

というようにクラス名付きで出力できるようになります。

テーマ用index.jsをつかってSyntaxHighlighterを読み込む
テーマ用index.jsを使ってSyntaxHighlighterのjsファイルを読み込んだ後、設定を行います。
SyntaxHighlighterをサーバにアップロード

テーマ用のindex.jsを使うのでこんな感じになります。

フォルダ構成は等は a-blog cms でスマートに js ( JavaScript ) ファイルを管理する に従ってください。
テーマ用index.jsの中身
/**
 * index.js
 */
jsDir = $('#user-js').attr('src').replace(/index\.js$/, '');

$(document).ready(function ( )
{                
  // SyntaxHighlighter の読み込みと適用
  if ( $('[class^="brush:"]:first').size() ) { //「blush:」で始まるクラス名をもつ要素がある場合のみ発動
    SyntaxHighlighter = undefined;  // おまじない
    XRegExp = undefined;  // おまじない

    var shScriptsDir = jsDir + 'syntaxhighlighter/scripts/'; // scriptsディレクトリまでのパス
    var shStylesDir = jsDir + 'syntaxhighlighter/styles/';  // stylesディレクトリまでのパス

    ACMS.Load.css(shStylesDir + 'shCore.css');
    ACMS.Load.css(shStylesDir + 'shThemeEmacs.css');//(shThemeDefault|shThemeDjango|shThemeEclipse|shThemeEmacs|shThemeFadeToGrey|shThemeMDUltra|shThemeMidnight|shThemeRDark)
    ACMS.Load(shScriptsDir + 'shCore.js')();
    ACMS.Load(shScriptsDir + 'shAutoloader.js')();

    function path()
    {
      var args = arguments,
          result = []
          ;
          
      for(var i = 0; i < args.length; i++)
          result.push(args[i].replace('@', shScriptsDir));
          
      return result
    };
    
    SyntaxHighlighter.autoloader.apply(null, path(
      'applescript            @shBrushAppleScript.js',
      'actionscript3 as3      @shBrushAS3.js',
      'bash shell             @shBrushBash.js',
      'coldfusion cf          @shBrushColdFusion.js',
      'cpp c                  @shBrushCpp.js',
      'c# c-sharp csharp      @shBrushCSharp.js',
      'css                    @shBrushCss.js',
      'delphi pascal          @shBrushDelphi.js',
      'diff patch pas         @shBrushDiff.js',
      'erl erlang             @shBrushErlang.js',
      'groovy                 @shBrushGroovy.js',
      'java                   @shBrushJava.js',
      'jfx javafx             @shBrushJavaFX.js',
      'js jscript javascript  @shBrushJScript.js',
      'perl pl                @shBrushPerl.js',
      'php                    @shBrushPhp.js',
      'text plain             @shBrushPlain.js',
      'py python              @shBrushPython.js',
      'ruby rails ror rb      @shBrushRuby.js',
      'sass scss              @shBrushSass.js',
      'scala                  @shBrushScala.js',
      'sql                    @shBrushSql.js',
      'vb vbnet               @shBrushVb.js',
      'xml xhtml xslt html    @shBrushXml.js'
    ));

    SyntaxHighlighter.all();
  }
});
「brush:」で始まるクラス名を持つ要素がページ内に存在する場合にのみSyntaxHighlighterを適用します。

これはSyntaxHighlighterを使わない場合に不要なファイルを読み込んでしまうという無駄を防ぐためです。

多くのページを同一のテンプレートで生成するblogやcmsを使っている場合には、ページごとにHTMLをカスタマイズすることが困難なためJavaScriptを使ってこれを制御します。

SyntaxHighlighterやその他の多くのライブラリは不必要に読み込まれた場合にも問題なく動作するように設計されていますが、より細かいチューニングを行う際にはこういった処理が必要になります。
SyntaxHighlighterのautoloaderを使っています。

コードはSyntaxHighlighterのサイトに例として載せてあったものをほぼそのままの形で使用しています。

SyntaxHighlighter - Dynamic Brush Loading

使用方法
テキストユニットからタグの種類を選ぶだけです。 簡単に形式の異なるソースをわかりやすく表示することができるようになりました。

テーマ一覧
テーマは次のうちから選べます （この機能は動作しません 2012/05/14）

  
shThemeDefault
  
shThemeDjango
  
shThemeEclipse
  
shThemeEmacs
  
shThemeFadeToGrey
  
shThemeMDUltra
  
shThemeMidnight
  
shThemeRDark

テーマ名をクリックするとこのページのSyntaxHighlighterのテーマが切り替わります

API
ACMS.Load
ACMS.Load    = function ( url, charset, pre, post )
{
     return function ( load, async )
     {
          // jsファイルを読み込んで実行する処理
          return load();
     }
}
ACMS.Loadはjsファイルを読み込み、実行するための関数を返します。 同期または非同期で実行されます。 （デフォルトでは同期で実行されます） 第一引数に読み込むjsファイルのurl、第二引数に読み込むファイルが使用している文字コード、第三引数に読み込みが行われる前に実行される関数、第四引数に読み込みごに実行される関数を指定します。 引数がない場合にはnullを指定します。
// 例
ACMS.Load('hoge.js')(); // 同期で読み込み、即実行

var hoge = ACMS.Load('hoge.js', 'utf-8', null, function ( ) { alert('読み込み完了！'); })
hoge(null, false); //非同期で実行

var hoge = ACMS.Load('hoge.js');
var result = hoge(function ( ) { return '実行結果'; }, true); // 同期で読み込み
alert(result);
ACMS.Load.css
ACMS.Load.css    = function ( url, charset, prepend )
{
  return true;
  // もしくは
  return false;
}
ACMS.Load.cssはcssファイルを読み込みます。 第一引数にファイルのurl、第二引数に読み込むファイルで使用されている文字コード、第三引数ではcssを一番はじめに読み込むか、一番あとに読み込むかを指定できます。 cssは読み込む順番によって適用のされ方が変わりますのでこのような指定ができるようになっています。
// 例

ACMS.Load.css('hoge.css');

ACMS.Load.css('hoge.css', 'utf-8'); // ファイルに日本語が含まれている場合

ACMS.Load.css('hoge.css', null, true); // 重複するセレクタがある時に既存のcssを読み込むcssによって上書きしたくない場合