ActionScriptを始めたので、ASについて記事を書こうと思ったら、AS3のプラグインがSyntaxHighliterに標準では入っていない!んで、探してみると、

http://yourpalmark.com/2009/02/17/as3-syntax-highlighting-with-syntaxhighlighter-20/

という記事を見つけて、入れてみたものの、上手く動かない…

 そこで、参考に他の標準で入っているものと比較してみると、SyntaxHighlighter2.xとSyntaxHighlighter3.xでところどころ名前が変わっているっぽかった。なので、AS3のプラグインを作ってみました。それに関しての記事は別にまた書こうと思います。今日はSyntaxHighlighter3.xのプラグインの作り方。

 大まかな構造としてはつぎのとおりです。

  • キーワード指定
  • キーワードにクラスをつける
  • さっきつけたクラスにcssを適用する

 下は例です。

[code lang=javascript]
/**
* AS3 Syntax
* http://yourpalmark.com/
*
* @author
* Mark Walters
*
* AS3 Syntax for SyntaxHighlighter 3.x
* @forked by
* Akifumi Nambu
* http://inter-arteq.com/
*/

//まずここを dp.sh.Brushes.名前 = function()という形にします。
dp.sh.Brushes.AS3 = function()
{
//syntax highlightするキーワードを文字列で指定します。
//style別に分けてください。変数名は何でも大丈夫です。
var definitions = 'class interface package';

var keywords = 'Array Boolean Date decodeURI decodeURIComponent encodeURI encodeURIComponent escape ' +
//中略
+'void Null'; //types

//ここで、それぞれにclassをつけていきます。
//基本の形は{regex:正規表現, css:"クラス名"}です。
this.regexList = [

//SingleLineCCommentsは一行のコメント
{ regex:dp.sh.RegexLib.SingleLineCComments, css: 'comments' },

//MultiLineCCommentsは複数行のコメント
{ regex:dp.sh.RegexLib.MultiLineCComments, css: 'blockcomments' },

//DoubleQuotedStringはダブルクオーテーションで囲まれた文字列
{ regex:dp.sh.RegexLib.DoubleQuotedString, css: 'string' },

//SingleQuotedStringはシングルクォーテーションで囲まれた文字列
{ regex:dp.sh.RegexLib.SingleQuotedString, css: 'string' },

//new RegExp('正規表現','コマンド')でも指定できます
{ regex:new RegExp('/s*#.*/','gm'), css: 'preprocessor' },

//this.GetKeywords(変数名)でその中にあるキーワードを指定できます。
{ regex: new RegExp(this.GetKeywords(definitions), 'gm'), css: 'definition' },
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' },

//このように直接指定することも可能です。
{ regex: new RegExp('var', 'gm'), css: 'variable' },
{ regex: new RegExp('function', 'gm'), css: 'function' },
{ regex: new RegExp('trace', 'gm'), css: 'trace' }
];

//他のプラグインと混同しないための識別子です。
this.CssClass='dp-as3';

//それぞれ先ほどつけたクラスにcssを指定します。
this.Style='.dp-as3 .comments{color: #009900; font-style: italic;}'
+'.dp-as3 .blockcomments{color: #990000;font-weight: bold;}'
+'.dp-as3 .string{color:#990000; fontweight:bold;}'
+'.dp-as3 .definition{color: #9900cc; font-weight:bold; }'
+'.dp-as3 .keyword{color: #0033ff; font-weight: bold;}'
+'.dp-as3 .preprocessor{color: #0033ff;}'
+'.dp-as3 .variable{color: #6699cc; font-weight: bold;}'
+'.dp-as3 .function{color:#339966; font-weight: bold;}'
+'.dp-as3 .trace{color: #cc6666; font-weight: bold;}'
};
//ここは dp.sh.Brushes.名前.prototype = new dp.sh.Highlighter(); とする。
dp.sh.Brushes.AS3.prototype = new dp.sh.Highlighter();

//使うときに指定する名前です。
//dp.sh.Brushes.名前.Aliases = ['名前1', '名前2', …]のように指定します。
//例えば、ここで['hoge']とすると<pre class="brush:hoge">で呼び出せます。
dp.sh.Brushes.AS3.Aliases = ['as', 'actionscript', 'ActionScript', 'as3', 'AS3'];
[/code]

と、こんな感じで、意外と簡単に作れます。何かマイナー言語とか、SyntaxHighlighter3.xに対応していない場合は、上のコードを参考に書き換えてみたら、大抵動きます。試してみてくださいね^^