前の関連記事：linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルド
テンプレートとしてjavascriptのブラシをクローンする
NetBeans8.1のメニューからチーム→Git→クローン。
https://github.com/syntaxhighlighter/brush-javascript
リポジトリURLにこれを入力して「終了」。
プロジェクトを開いてbrush-javascriptを右クリック→npmインストール。
npm testも実行するように書いてありますがやってみるとエラーばかりでてきます。
よくわからないのでこのまま次に進みます。
作成しないといけないブラシは3つ
linuxBean14.04(111)SyntaxHighlighter3.0.9をビルドする:成功編でこのブログで使っているブラシを整理しました。
Bash
Css
Java
Python
Sql
Xml
これらはv4のデフォルトブラシにあります。
Bat（DOSコマンド)
JQuery
Makefile
Makefile用のbrush.jsを作る
まずプロジェクトの名前をbrush-Makefileに変更しました。
プロジェクトの右クリック→名前の変更。
「プロジェクト・フォルダの名前も変更」にチェックを付けます。
brush.jsを編集します、、、
うーん、Making a Brush · syntaxhighlighter/syntaxhighlighter Wikiに書いてある解説とテンプレートがだいぶ違うように思います。
ということでlinuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドでsyntaxhighlighterプロジェクトのreposフォルダ内にダウンロードした各brush.jsを参考にします、、、
とりあえず面倒なのでlinuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作るのfunction Brush()の中身をまるごと移しました。
Brush.aliases = ['Makefile']; |
と、よくみたらコメントなどの正規表現の指定の仕方も変わっています。
syntaxhighlighter/node_modules/syntaxhighlighter-regex/index.js
このファイルをみるとlinuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作るで調べたパターンと正規表現の名前自体は変更ありません。
結局SyntaxHighlighter.regexLibをregexLibに置換するだけでいけそうです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var BrushBase = require('brush-base');var regexLib = require('syntaxhighlighter-regex').commonRegExp;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: regexLib.singleLineCComments, css: 'comments' }, // one line comments { regex: regexLib.doubleQuotedString, css: 'string' }, // double quoted strings { regex: 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 BrushBase();Brush.aliases = ['Makefile'];module.exports = Brush; |
sample.txtとpackage.jsonの編集
sample.txtはブラシを適用する例を書くもので、これの作成はとても重要と書いてありますがすべての要素を含めた例を作るのは難しいですよね。
でもこのsample.txtの内容はビルドしたときにdistフォルダに出力されるindex.htmlに自動的に含めてくれます。
1 2 3 4 5 6 7 8 9 10 |
/** * This is a Makefile sample. */%.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)) |
次にpackage.jsonの編集をします。
2 |
"name": "brush-Makefile", |
(npmにアップロードするにはほかにも変更が必要です。linuxBean14.04(124)SyntaxHighlighter v4の自作ブラシをnpmに登録する参照。)
これで完成です。
brush-Makefileモジュールを含めてSyntaxHighlighterをビルドする
（これではUnknown brush "Makefile".と言われてビルドできません。次のようにシンボリックリンクを張らないといけません。）
syntaxhighlighter/reposにbrush-Makefileをコピーします。
ln -s ~/NetBeansProjects/syntaxhighlighter/repos/brush-Makefile ~/NetBeansProjects/syntaxhighlighter/node_modules |
linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドで作成したsyntaxhighlighterプロジェクトをNetBeans8.1で開きます。
package.jsonのscriptsのbuildを編集します。
14 |
"build": "gulp build --brushes=bash,css,java,python,sql,xml,Makefile --theme=emacs" |
これでうまくいきました。
SyntaxHighlighter ｖ4.0.1になっていました。
同様にしてBatとJQueryのブラシファイルも作成しました。
v3をv4に入れ替える
syntaxhighlighter.jsは圧縮するようにしました(linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルド参照)。
最後の//# sourceMappingURL=syntaxhighlighter.js.mapは削除しました。
theme.cssの中身はMinify and Compress CSSで圧縮しました。
1 2 3 4 5 6 7 8 9 10 11 |
<style> 圧縮したtheme.cssの中身</style><script> syntaxhighlighter.jsの中身</script><script> syntaxhighlighterConfig = { 'auto-links': false };</script> |
ページ全体を待たずに描画されるようになったので表示速度が改善されました。
Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決の問題も起こりませんでした。
UTF-8の半角スペースには2種類あるの問題も起きません。
(2016.12.1追記。Windows10 64bitのChromeバージョン 54.0.2840.99 m (64-bit)で不必要な縦スクロールが出るのに気が付きました。バージョン 57.0.2938.0 canary (64-bit)でも出ます。Firefox 32bit 50.0.2は問題ありません。Chomium バージョン 49.0.2623.108 Ubuntu 14.04も問題ありません。CSSのfont-familyをコメントアウトする縦スクロールバーがでなくなりました。Chromeのheight:100%がおかしいが原因のようですが、vertical-alignをコメントアウトしても解決しませんでした。)
参考にしたサイト
Making a Brush · syntaxhighlighter/syntaxhighlighter Wiki
SyntaxHighlighter v4のブラシの作成方法ですがGitHubリポジトリのブラシファイルとは少し異なりました。
Minify and Compress CSS
CSSの圧縮ツール。
p--q/brush-Makefile: for SyntaxHighlighter V4
この記事で作成したMakefileのブラシのGitHubリポジトリ。
0 件のコメント:
コメントを投稿