SyntaxHighlighterEvolvedでWordPressのHaxeのソースを読みやすくする


前のHaxeの記事を作った時に調べたまとめ。

*2014/08/02プラグインの更新で動作しなくなっていたので修正

haxe_highlight

→前の記事:Haxe/JSの練習のためにスライドショーっぽいものを作る – spiffieldLabs

ブログにソースを貼り付けるのであればSyntaxHighlighterEvolvedが便利です。(使用したのはver3.1.10です。)

JavaScriptやCSSなどはプラグインを有効化すればさらっと綺麗に表示してくれるのですが、Haxeは同梱されておらず、[haxe][/haxe]で囲ってもなにもしてくれません。

SyntaxHighlighterEvolvedには同梱していない言語を追加する方法があります。プラグインのフォルダにthird-party-brushesの中の_readme.txtを読めば書いてあるんですが、

Adding A New Brush (Language) | Viper007Bond.com;

こちらのページにあります。

HaxeのbrushはSyntaxHighlighter本家?のGithubリポジトリの中にありましたのでそちらをDLして使いました。

alexgorbatchev/SyntaxHighlighter · GitHub (Haxeのbrushはsrc/js/shBrushHaxe.jsです)

追加の方法

先ほどのページのそのままなんですが以下のようにすればOKです。

  1. プラグインのthird-party-burshesフォルダにshBrushHaxe.jsを配置
  2. プラグインのsyntaxhighlighter.phpを開いて以下の2点を編集
//150行目周辺のRegister some popular third-party brushesの辺りに以下を追加。
wp_register_script( 'syntaxhighlighter-brush-haxe', plugins_url( 'third-party-brushes/shBrushHaxe.js',__FILE__ ),array('syntaxhighlighter-core'), '20130616');
//170行目辺り
$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
   'as3'           => 'as3',
   'actionscript3' => 'as3',
//言語設定が沢山並んでいるので、適当な位置にhaxeとして以下を追加
    'haxe' => 'haxe',

後は通常SyntaxHighlighterEvolvedを使うように設定し、[haxe][/haxe]でソースを囲えば動作するはずです。

[haxe]
class Test {
static function main() {
trace("Hello World !");
}
}
[/haxe]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です