linuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作る

前の関連記事：linuxBean14.04(22)Bracketsの拡張機能の右クリックメニューを追加する

SyntaxHighlighterに使うMakefile用のBrushファイルを自作します。エディタはBracketsを使います。

BracketsのライブプレビューでSyntaxHighlighterの例をみる

linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法でsyntaxhighlighter_3.0.83.zipを解凍したsyntaxhighlighter_3.0.83フォルダをBracketsで開きます。

index.htmlをBracketsで開きます。

ファイル→試験ライブプレビューを有効にする。（今回VirtualBoxのゲストOSで行っているため。）

Chromeを起動。

Bracketsでライブプレビューボタンをクリック。


簡単にローカルでサーバを立ち上げることができましたね。

 <script type="text/javascript" src="scripts/shCore.js"></script>
 <script type="text/javascript" src="scripts/shBrushMakefile.js"></script>
 <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
 <script type="text/javascript">SyntaxHighlighter.all();</script>

index.htmlの7行目をこれから作るshBrushMakefile.jsに書き換えておきます。

さらに15行目のbrushの指定もMakefileに変えてpreタグの中身も適当なMakefileの内容に書き換えておきます。（今回はLibreOfficeのサンプルのMakefileを挿入）。

<pre class="brush: Makefile;">
# Builds the FirstSteps examples of the Developers Guide.

PRJ=../../..
SETTINGS=$(PRJ)/settings

include $(SETTINGS)/settings.mk
include $(SETTINGS)/std.mk

…
略
…

.PHONY: clean
clean :
 -$(DELRECURSIVE) $(subst /,$(PS),$(OUT_APP_CLASS))
</pre>

SyntaxHighlighterのBrushファイルの構造

SyntaxHighlighter - Developing a custom brushにBrushファイルの自作のやり方が書いてあります

でもscriptsフォルダにあるshBrush～.jsファイルを眺めてみるとちょっとやり方が違っていますので、実際に使っているscriptsフォルダのBrushファイルをまねすることにします。

;(function(){
    typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
    function Brush(){
        var keywords = 'キーワード1 キーワード2 キーワード3 … キーワードN' ;
        var commands =  'コマンド1 コマンド2 コマンド3 … コマンドN' ;
        this.regexList = [
            { regex: /^#!.*$/gm,           css: 'preprocessor bold' },
            { regex: /\/[\w-\/]+/gm,          css: 'plain' },
            { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,  css: 'comments' },
            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,   css: 'string' },
            { regex: SyntaxHighlighter.regexLib.singleQuotedString,   css: 'string' },
            { regex: new RegExp(this.getKeywords(keywords), 'gm'),   css: 'keyword' },
            { regex: new RegExp(this.getKeywords(commands), 'gm'),   css: 'functions' }
        ];
    };
    Brush.prototype = new SyntaxHighlighter.Highlighter();
    Brush.aliases = ['エイリアス名'];
    SyntaxHighlighter.brushes.プロパティ名 = Brush;
    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

Brushファイルはだいたいこんな感じになっています。

最初と最後に追加されているCommonJSの部分は相変わらずよく理解できていません。

17行目のエイリアス名にはhtmlのpreタグのbrushプロパティで指定する値になります。

18行目のプロパティ名は重複しないようにBrushファイル名を入れればよいのだと思います。

正規表現パターンで適用するCSSのプロパティを指定する

4行目と5行目の変数keywordsとcommandsはそれぞれ12行目と13行目で正規表現オブジェクトを生成するときに使われているものです。

このようにハイライトしたい用語一覧を作成して正規表現オブジェクトを生成して、cssとペアのオブジェクトにしてthis.regexListに加えればその用語が指定したcssのセレクタでハイライトされます。


拡張機能のBrackets Css Color Previewを有効にしてstylesフォルダにあるshCoreDefault.cssファイルをBracketsで開くと各セレクタの色がすぐに確認できます。

plain、comments、string、keyword、preprocessor、variable、value、functions、constants、scripts、color1、color2、color3

shThemeDefault.cssで定義されているプロパティを書き出してみました。

cssプロパティの値にこれらを指定すると同じ書式で表示されます。
(余談ですが、Bloggerのエディタではgrayと書いてもgreyに勝手に書き換えられますね。）

7行目と8行目は正規表現パターンを直接指定しています。
JavaScriptの正規表現は正規表現で丸括弧「キャプチャする括弧」を使って日付書式を整形するでやりました。

正規表現パターンの確認には正規表現チェッカー（JavaScript版） | Softel labsを使うと便利です。

9行目から11行目はすでにSyntaxHighgliterで定義されている正規表現パターンです。

 /** Common regular expressions. */
 regexLib : {
  multiLineCComments   : /\/\*[\s\S]*?\*\//gm,
  singleLineCComments   : /\/\/.*$/gm,
  singleLinePerlComments  : /#.*$/gm,
  doubleQuotedString   : /"([^\\"\n]|\\.)*"/g,
  singleQuotedString   : /'([^\\'\n]|\\.)*'/g,
  multiLineDoubleQuotedString : new XRegExp('"([^\\\\"]|\\\\.)*"', 'gs'),
  multiLineSingleQuotedString : new XRegExp("'([^\\\\']|\\\\.)*'", 'gs'),
  xmlComments     : /(&lt;|<)!--[\s\S]*?--(&gt;|>)/gm,
  url       : /\w+:\/\/[\w-.\/?%&=:@;]*/g,
  
  /** <?= ?> tags. */
  phpScriptTags     : { left: /(&lt;|<)\?=?/g, right: /\?(&gt;|>)/g },
  
  /** <%= %> tags. */
  aspScriptTags    : { left: /(&lt;|<)%=?/g, right: /%(&gt;|>)/g },
  
  /** <script></script> tags. */
  scriptScriptTags   : { left: /(&lt;|<)\s*script.*?(&gt;|>)/gi, right: /(&lt;|<)\/\s*script\s*(&gt;|>)/gi }
 },

src/shCore.jsの116行目以降に一覧がありました。

正規表現パターンの結果を言葉で正確に書くのは難しそうなので、これを使っているバンドルBrushを挙げてみました。

/*…*/(複数行可) multiLineCComments:AS3 Cpp CSharp Css Groovy JavaFX JScript　PHP Sass Scala

//… singleLineCComments:AS3 Cpp CSharp Delphi Groovy Java JavaFX JScript　PHP Python Ruby Sass Scala

#… singleLinePerlComments:Bash

"…" doubleQuotedString:AS3　Bash ColdFusion Cpp CSharp　Css Erlang Groovy Java JavaFX JScript Perl　PHP PowerShell Ruby Sass　Vb

'…' singleQuotedString:AS3　Bash ColdFusion Cpp CSharp　Css Delphi Erlang Groovy Java JavaFX JScript Perl　PHP PowerShell Ruby Sass Scala

'"…"'(自信なし） multiLineDoubleQuotedString:Scala Sｑｌ

"'…'"(自信なし） multiLineSingleQuotedString:Scala Sｑｌ

<!--…-->　xmlComments:ColdFusion Xml

…://…　url:

<?=… ?> phpScriptTags:Php

<%=… %>(HTMLにあるタグなの?） aspScriptTags:Python

<script>…</script> scriptScriptTags:JScript

urlはどのBrushファイルでも使われていないようです。

phpScriptTags、aspScriptTags、scriptScriptTagsはそれぞれHTMLファイルに埋め込んだPHP、Python、JavaSriptに対応するためのもののようでforHtmlScript()メソッドの引数にされています。

PythonをHTMLに埋め込むタグについては実際どう使うのか調べてもわかりませんでした。

multiLineDoubleQuotedStringとmultiLineSingleQuotedStringも使用例を見つけられませんでしたので間違っているかもしれません。

これらの正規表現パターンにはXRegExpが使われています。

shBrushMakefile.jsを作る

エイリアスとプロパティ名はともにMakefileにします。

Makefileのコメントは#から始まるのでsingleLinePerlCommentsを使って、cssはcommentsを割り当てます。

またdoubleQuotedStringとsingleQuotedStringにはstringを割り当てます。

;(function(){
    typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
    function Brush(){
        this.regexList = [
            { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,  css: 'comments' },  // one line comments
            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,   css: 'string' },  // double quoted strings
            { regex: SyntaxHighlighter.regexLib.singleQuotedString,   css: 'string' },  // single quoted strings
        ];
    }
    Brush.prototype = new SyntaxHighlighter.Highlighter();
    Brush.aliases = ['Makefile'];
    SyntaxHighlighter.brushes.Makefile = Brush;
    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

これだけではさびしいので正規表現パターンを追加していきます。

comments、string、keyword、variable、value、functions、constants、color1、color3

これぐらいの色分けを目指します。

commentsとstringは既に使用しているので残りのcssを使います。

まずfunctionsを使うようにします。

GNU make 日本語訳(Coop編) - テキスト変形関数に関数が載っていますのでそれを全部打ち込みます。

;(function(){
    typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
    function Brush(){
        var functions =  'subst patsubst strip findstring filter filter-out sort dir notdir suffix basename addsuffix addprefix join word wordlist words firstword wildcard foreach origin shell';
        this.regexList = [
            { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,  css: 'comments' },  // one line comments
            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,   css: 'string' },  // double quoted strings
            { regex: SyntaxHighlighter.regexLib.singleQuotedString,   css: 'string' },  // single quoted strings
            { regex: new RegExp(this.getKeywords(functions), 'gm'),   css: 'functions' }
        ];
    }
    Brush.prototype = new SyntaxHighlighter.Highlighter();
    Brush.aliases = ['Makefile'];
    SyntaxHighlighter.brushes.Makefile = Brush;
    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

4行目で打ち込んだ関数名リストを変数functionsに代入し、9行目でcssのプロパティを割り当てています。

同様にしていろいろ正規表現パターンを追加していきます。

自動変数には規則性があるので正規表現パターンにします。

$<がなぜかハイライトされません、、、と思ったら「<」はエスケープ処理しないといけないのでした。

{ regex: /\$\(?[\@%<\?\^\+\*](D\)|F\))*/gm,      css: 'keyword' },       // 自動変数

あとで%もこのハイライトに追加しました。

変数も正規表現パターンにしました。変数名に空白があるときはハイライトできません。

{ regex: /\$\([^\@%<\?\^\+\*]\w+\)/gm,             css: 'variable' },      // 変数

特別なビルトイン・ターゲット名にはconstantsを割り当てました。

getKeywords()の引数の中のドット.は無効でした。

shBrushMakefile.jsが完成

;(function(){
    typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
    function Brush(){
        var functions =  'subst patsubst strip findstring filter filter-out sort dir notdir suffix basename addsuffix addprefix join word wordlist words firstword wildcard foreach origin shell';
        var constants = 'PHONY SUFFIXES DEFAULT PRECIOUS INTERMEDIATE SECONDARY IGNORE SILENT EXPORT_ALL_VARIABLES';
        this.regexList = [
            { regex: SyntaxHighlighter.regexLib.singleLinePerlComments,  css: 'comments' },  // one line comments
            { regex: SyntaxHighlighter.regexLib.doubleQuotedString,   css: 'string' }, // double quoted strings
            { regex: SyntaxHighlighter.regexLib.singleQuotedString,   css: 'string' }, // single quoted strings
            { regex: /\$\([^\@%<\?\^\+\*]\w+\)/gm,             css: 'variable' },  // 変数
            { regex: /((\$\(?[\@%<\?\^\+\*](D\)|F\))*)|%|\$&lt;)/gm,    css: 'keyword' },   // 自動変数
            { regex: new RegExp(this.getKeywords(functions), 'gm'),   css: 'functions' }, // テキスト変形関数
            { regex: new RegExp(this.getKeywords(constants), 'gm'),   css: 'constants' }  // ビルトインターゲット名  
        ];
    }
    Brush.prototype = new SyntaxHighlighter.Highlighter();
    Brush.aliases = ['Makefile'];
    SyntaxHighlighter.brushes.Makefile = Brush;
    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

linuxBean14.04(21)Bloggerで使うJavaScriptの開発環境で作ったhttp.shでローカルサーバを立ち上げて、Bloggerのテストブログに読み込んでみるとちゃんとハイライトされました。

いまのところこのブログに貼り付けていますが問題は起きていません。

linuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作る - p--qからshBrushMakefile.jsとshBrushMakefile.min.jsがダウンロードできます。

%.run: $(OUT_APP_CLASS)/%.jar
 $(SDK_JAVA) -Dcom.sun.star.lib.loader.unopath="$(OFFICE_PROGRAM_PATH)" -jar $<

.PHONY: clean
clean :
 -$(DELRECURSIVE) $(subst /,$(PS),$(OUT_APP_CLASS))

こんな感じになります。

参考にしたサイト

SyntaxHighlighter - Developing a custom brush
SyntaxHiglhlighterの自作Brushの作り方。

JavaScript Regex :: XRegExp
正規表現の機能を拡張するSyntaxHighlighterで使われているJavaScriptライブラリー。

次の関連記事:linuxBean14.04(24)git-guiとgitkのインストール