前の関連記事：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でライブプレビューボタンをクリック。
簡単にローカルでサーバを立ち上げることができましたね。
6 7 8 9 |
<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> |
さらに15行目のbrushの指定もMakefileに変えてpreタグの中身も適当なMakefileの内容に書き換えておきます。（今回はLibreOfficeのサンプルのMakefileを挿入）。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<pre class="brush: Makefile;"># Builds the FirstSteps examples of the Developers Guide.PRJ=../../..SETTINGS=$(PRJ)/settingsinclude $(SETTINGS)/settings.mkinclude $(SETTINGS)/std.mk…略….PHONY: cleanclean : -$(DELRECURSIVE) $(subst /,$(PS),$(OUT_APP_CLASS))</pre> |
SyntaxHighlighterのBrushファイルの構造
SyntaxHighlighter - Developing a custom brushにBrushファイルの自作のやり方が書いてあります
でもscriptsフォルダにあるshBrush～.jsファイルを眺めてみるとちょっとやり方が違っていますので、実際に使っているscriptsフォルダのBrushファイルをまねすることにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
;(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;})(); |
最初と最後に追加されている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版） | Softel labsを使うと便利です。
9行目から11行目はすでにSyntaxHighgliterで定義されている正規表現パターンです。
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
/** 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 : /(<|<)!--[\s\S]*?--(>|>)/gm, url : /\w+:\/\/[\w-.\/?%&=:@;]*/g, /** <?= ?> tags. */ phpScriptTags : { left: /(<|<)\?=?/g, right: /\?(>|>)/g }, /** <%= %> tags. */ aspScriptTags : { left: /(<|<)%=?/g, right: /%(>|>)/g }, /** <script></script> tags. */ scriptScriptTags : { left: /(<|<)\s*script.*?(>|>)/gi, right: /(<|<)\/\s*script\s*(>|>)/gi }}, |
正規表現パターンの結果を言葉で正確に書くのは難しそうなので、これを使っているバンドル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を割り当てます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
;(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編) - テキスト変形関数に関数が載っていますのでそれを全部打ち込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
;(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;})(); |
同様にしていろいろ正規表現パターンを追加していきます。
自動変数には規則性があるので正規表現パターンにします。
$<がなぜかハイライトされません、、、と思ったら「<」はエスケープ処理しないといけないのでした。
{ regex: /\$\(?[\@%<\?\^\+\*](D\)|F\))*/gm, css: 'keyword' }, // 自動変数 |
変数も正規表現パターンにしました。変数名に空白があるときはハイライトできません。
{ regex: /\$\([^\@%<\?\^\+\*]\w+\)/gm, css: 'variable' }, // 変数 |
getKeywords()の引数の中のドット.は無効でした。
shBrushMakefile.jsが完成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
;(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\))*)|%|\$<)/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(23)Makefile用のSyntaxHighlighterのBrushファイルを作る - p--qからshBrushMakefile.jsとshBrushMakefile.min.jsがダウンロードできます。
1 2 3 4 5 6 |
%.run: $(OUT_APP_CLASS)/%.jar $(SDK_JAVA) -Dcom.sun.star.lib.loader.unopath="$(OFFICE_PROGRAM_PATH)" -jar $<.PHONY: cleanclean : -$(DELRECURSIVE) $(subst /,$(PS),$(OUT_APP_CLASS)) |
参考にしたサイト
SyntaxHighlighter - Developing a custom brush
SyntaxHiglhlighterの自作Brushの作り方。
JavaScript Regex :: XRegExp
正規表現の機能を拡張するSyntaxHighlighterで使われているJavaScriptライブラリー。
0 件のコメント:
コメントを投稿