1 月16th

wordpressにAS3/MXMLのコードハイライトプラグインを導入

このブログ(wordpress)で、AS3とMXMLのコードハイライトを行いたかったので
wordpressのプラグイン

SyntaxHighlighter

を導入しました。

SyntaxHighlighterの導入手順は以下の通り、

  1. ここから、SyntaxHighlighterプラグインをダウンロード
  2. wp-content/plugins/フォルダ以下に、syntaxhighlighterフォルダをアップロード
  3. wordpressの管理画面から、 SyntaxHighlighterを有効にする。

上記手順で、SyntaxHighlighterのインストールは完了です。
記事を書くときに
[sourcecode language=’言語’]code here[/sourcecode]
とするだけで、以下の言語がハイライトされるようになります。

* C++ -- cpp, c, c++* C# -- c#, c-sharp, csharp* CSS -- css* Delphi -- delphi, pascal

* Java -- java

* JavaScript -- js, jscript, javascript

* PHP -- php

* Python -- py, python

* Ruby -- rb, ruby, rails, ror

* SQL -- sql

* VB -- vb, vb.net

* XML/HTML -- xml, html, xhtml, xslt

ただ、このままでは、actionscript3とmxmlに対応できていないため
以下のサイトから各プラグインをダウンロード。

actionscript3 用 - AS3 Syntax Highlighting (with SyntaxHighlighter)

mxml用 - MXMLコード用 SyntaxHighlighter を作ってみた

それぞれを解凍後、

actionscript3用 - shBrushAS3.js
mxml用 - shBrushMxml.js

をwp-content/plugins/syntaxhighlighter/files/以下にアップロード 。

SyntaxHighlighterにactionscript3とmxmlの設定を追加。
wp-content/plugins/syntaxhighlighter.phpの70行目から96行目付近にある言語の設定に以下を追加する。


'actionscript'      => 'shBrushAS3.js',
'mxml'      => 'shBrushMxml.js',

で、wp-content/plugins/syntaxhighlighter.phpを上書き保存。

これでactionscript,mxmlのコードもハイライトされるようになります。

■AS3サンプル


package org.tmatsuda.graphics {
    import flash.display.Sprite;

    public class Ball extends Sprite{
       private var radius:Number = 40;
       private var color:uint = 0xff0000;

       public function Ball(params:Object) {
            init(params);
       }

        public function init(params:Object):void {
            if (params.color == undefined) params.color = color;
            if (params.radius == undefined) params.radius = radius;
                graphics.beginFill(params.color);
                graphics.drawCircle(0, 0, params.radius);
                graphics.endFill();
        }
    }
}

About this entry