ホーム / 旧ブログ /

linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する

2016-07-17

旧ブログ

t f B! P L
Making a Brush · syntaxhighlighter/syntaxhighlighter Wikiに作り方が書いてあります。前回設定したNetBeans8.1を使います。

前の関連記事：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

この3つはないので作らないといけません。

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に置換するだけでいけそうです。
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\))*)|%|\$&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 BrushBase();
Brush.aliases = ['Makefile'];
module.exports = Brush;
とりあえずこれでやってみます。

sample.txtとpackage.jsonの編集


sample.txtはブラシを適用する例を書くもので、これの作成はとても重要と書いてありますがすべての要素を含めた例を作るのは難しいですよね。

でもこのsample.txtの内容はビルドしたときにdistフォルダに出力されるindex.htmlに自動的に含めてくれます。
/**
 * This is a Makefile sample.
 */

%.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))
(2017.4.16追記。この例のコメントの書式は間違っているのでlinuxBean14.04(161)brush-Makefileのバグを修正するで修正しました。)

次にpackage.jsonの編集をします。
  "name": "brush-Makefile",
これはnameを変更するだけです。
(npmにアップロードするにはほかにも変更が必要です。linuxBean14.04(124)SyntaxHighlighter v4の自作ブラシをnpmに登録する参照。)

これで完成です。

brush-Makefileモジュールを含めてSyntaxHighlighterをビルドする


brush-Makefileをsyntaxhighlighter/node_modulesにコピーします。
（これではUnknown brush "Makefile".と言われてビルドできません。次のようにシンボリックリンクを張らないといけません。）

syntaxhighlighter/reposにbrush-Makefileをコピーします。
ln -s ~/NetBeansProjects/syntaxhighlighter/repos/brush-Makefile ~/NetBeansProjects/syntaxhighlighter/node_modules
syntaxhighlighter/reposのbrush-Makefileフォルダのシンボリックリンクをsyntaxhighlighter/node_modulesに作成します。

linuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドで作成したsyntaxhighlighterプロジェクトをNetBeans8.1で開きます。

package.jsonのscriptsのbuildを編集します。
    "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で圧縮しました。
<style>
  圧縮したtheme.cssの中身
</style>
<script>
  syntaxhighlighter.jsの中身
</script>
<script>
  syntaxhighlighterConfig = {
    'auto-links': false
  };
</script>
これをlinuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法と同様にしてv3を入れていたHTML/JavaScriptガジェットに入れ替えました。

ページ全体を待たずに描画されるようになったので表示速度が改善されました。

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リポジトリ。

次の関連記事:linuxBean14.04(124)SyntaxHighlighter v4の自作ブラシをnpmに登録する

ブログ検索 by Blogger

Translate

最近のコメント

読込中...

全記事

Created by Calendar Gadget

QooQ