linuxBean14.04(111)SyntaxHighlighter3.0.9をビルドする:成功編

2016-05-09

旧ブログ

t f B! P L
linuxBean14.04(109)SyntaxHighlighter3.0.9をビルドする:失敗の記録で失敗していたのは単にNode.jsのバージョンが合わなかっただけでした。この記事はそれに至る記録です。

前の関連記事:linuxBean14.04(110)Node.jsのnpm使い方メモ


node-gypが原因ではなかった


前回SyntaxHighlighter3.0.9をnpm installしたときのログsyntaxhighlighter-3.0.9 npm installでうまくいかない原因を考えました。

2行目から6行目は依存関係にあるパッケージが古くて既にメインテナンスされていないという警告なのでうまくいかない原因ではなさそうです。

6行目でnode-sassのリビルドをしています。

そこでnode-gypを使うわけですが、どうもそこが原因のようです。
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
これはnpm ls node-gyp -gで調べるとnode-gypのバージョンはまだv3.3.1なので該当しないようです。
pq@pq-VirtualBox:~$ npm ls node-gyp -g
/home/pq/.nvm/versions/node/v6.0.0/lib
└─┬ npm@3.8.6
  └── node-gyp@3.3.1 
問題は15行目以下のmakeしているところです。
make: ディレクトリ `/home/pq/_tmp/syntaxhighlighter-3.0.9/node_modules/node-sass/build' に入ります
CXX(target) Release/obj.target/binding/binding.o
ここから下がエラーになっています。

C++のコンパイルをしている部分のようです。

syntaxhighlighter-3.0.9フォルダ下に作られたnode_modules/node-sass/buildをみるとこれらのファイルはnode-gypが作成しているようです。
On Unix:
  • python (v2.7 recommended, v3.x.x is not supported)
  • make
  • A proper C/C++ compiler toolchain, like GCC
GitHub - nodejs/node-gyp: Node.js native addon build tool
linuxBean14.04(29)LibreOfficeDev5.0SDKの例を一括でmakeするでg++はインストール済でmakeも既にインストール済です。

python3はダメなようですがpythonコマンドはpython3.4.3ですがpython2.7でpython2.7が起動できるようにしてあります。
pq@pq-VirtualBox:~$ python --version
Python 3.4.3 :: Anaconda 2.3.0 (32-bit)
pq@pq-VirtualBox:~$ python2.7  --version
Python 2.7.6

Python3しか見つけられないときはそれに関するエラーがでてくるようなので原因ではないと思いますが、npmの設定でpython2.7へのパスを指定してみます。

 npm config set python /usr/bin/python2.7

これでnpmが使うpythonのバージョンが指定できます。

設定内容はnpm config listで確認できます。

設定を取り消すコマンドはわかりませんでしたが、この設定は~/.npmrcに書いてあるのでそれを消せばよいようです。

で、やってみましたが案の定、問題は解決せず。

やはり問題はCのコンパイルにあるようです。

node-sass 0.6.7がnode v0.10.xでしか動かないことが原因だった

kennethormandy commented on 11 Jan 2014As far as I know Node-sass only works with Node 0.10.x right now, so you could install the current version instead or use something like nvm. (Sorry if you already know all that stuff, just thought I’d mention it!)
Mac OS X install fails · Issue #217 · sass/node-sass

なんと!

Mac OS Xでの話ですがnode-sassはnode v0.10.xでしか動かないそうです。

README.mdにはSupported Node.js versions 0.10, 0.12, 1, 2, 3, 4, 5, and 6.と書いてありますけど、、、
(動かないのはnode 0.6.7だけで最新版のnode-sassはnode v6.0.0でもインストール出来ました。最新版ではリビルドは行わずバイナリをダウンロードしているようです。)

で、node v0.10.45でやってみたらうまくいきました。

syntaxhighlighter-3.0.9 npm install (v0.10.45)

./node_modules/.bin/bower install

./node_modules/.bin/grunt build

あとはこの2つのコマンドを実行してあっけなくビルド完了。

syntaxhighlighter-3.0.9 built by node v0.10.45

pkgフォルダ内にビルドされたスクリプトができていました。

ちなみにパスに日本語があるとエラーはでないのにcssのないcssファイルが出来上がりました。

SyntaxHighlighter3.0.83からの主な変更点


使い方は一緒ですのですでに貼り付けてあるpreタグ等の変更は必要ありません。

SyntaxHighlighter3.0.9はソースにビルドに必要なファイルが添付されるようになりました。

SyntaxHighlighter3.0.83だとXRegExp.jsは含まれていますがそれをブラウザでインポートするJavaScriptに変換する方法を自分で用意するのは私には難しいです。

shCore.jsをMeldで比較してみました。
 /** Common regular expressions. */
 regexLib : {
  multiLineCComments   : XRegExp('/\\*.*?\\*/', 'gs'),
  singleLineCComments   : /\/\/.*$/gm,
  singleLinePerlComments  : /#.*$/gm,
  doubleQuotedString   : /"([^\\"\n]|\\.)*"/g,
  singleQuotedString   : /'([^\\'\n]|\\.)*'/g,
  multiLineDoubleQuotedString : XRegExp('"([^\\\\"]|\\\\.)*"', 'gs'),
  multiLineSingleQuotedString : XRegExp("'([^\\\\']|\\\\.)*'", 'gs'),
  xmlComments     : XRegExp('(&lt;|<)!--.*?--(&gt;|>)', 'gs'),
  url       : /\w+:\/\/[\w-.\/?%&=:@;#]*/g,
  phpScriptTags     : { left: /(&lt;|<)\?(?:=|php)?/g, right: /\?(&gt;|>)/g, 'eof' : true },
  aspScriptTags    : { left: /(&lt;|<)%=?/g, right: /%(&gt;|>)/g },
  scriptScriptTags   : { left: /(&lt;|<)\s*script.*?(&gt;|>)/gi, right: /(&lt;|<)\/\s*script\s*(&gt;|>)/gi }
 },
これらの正規表現パターンに対応するものについてはlinuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作るでやりました。

/*…*/(複数行可) multiLineCComments、<!--…--> xmlComments
…://… url、<?=… ?> phpScriptTagsの4つについて正規表現パターンが変更になっています。

きっと改善されたのだと思います。
    // For Webkit browsers, replace nbsp with a breaking space
    code = code.replace(/\u00a0/g, " ");
これはUTF-8の半角スペースには2種類あるで扱った問題を改善するものです。

\u00a0はUnicodeのコードポイントU+00A0であるノンブレーキングスペースです。

Chromeからコピペするとノンブレーキングスペースがutf-8のエンコードのC2A0でペーストされて正しくエディタで認識できなくなるので、描画後に普通のスペースに置換しています。

複数個の普通のスペースはブラウザでレンダリングするときに1個に丸められてしまいますが、描画後に置換したものは丸められないことを利用しています。

これは3.0.9にバージョンアップする価値が大いにあります。

linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法の「shCore.jsの中身」の部分をsyntaxhighlighter-3.0.9/pkg/scriptsに作成されたshCore.min.jsと入れ替えました。

確認するとChromeからのコピペでUTF-8の半角スペースには2種類あるで発生していた問題は起きなくなりました。

これはとても快適になりました、、、と思ったらXmlのブラシが利かないことに気が付きました。

3.0.83のshBrushXml.jsは3.0.9では動かない


3.0.83のshBrushXml.jsは動きませんが、3.0.9のshBrushXml.jsではちゃんと動きます。

shBrushXml.jsを比べると少し内容が変わっていました。

まあブラシも全部3.0.9のものに置き換えればよいのですが、このブログではSyntaxHighlighter付属のブラシも使用しているのでそれらへの対応も考えないといけないので3.0.83のshBrushXml.jsが動かない原因を探すことにしました。

ちなみにこのブログで現在使用しているブラシは以下です。
2016.5.17追記。以下のブラシで3.0.9で動かないのはshBrushXml.jsだけでした。linuxBean14.04(112)SyntaxHighlighter3.0.83のshBrushXml.jsが3.0.9で動かない原因の追求参照。)

shBrushXml.js

shBrushCss.js

shBrushPython.js

shBrushJava.js

shBrushSql.js
(Blogger:SyntaxHighlighter(10)SQL用のSyntaxHighlighter Brushファイルを導入で導入。)

shBrushBash.js
(Blogger:SyntaxHighlighter(9)bash, shellのBrushを追加するで導入。)

以上はSyntaxHighlighter3.0.83付属のものです。

shBrushBat.min.js
(Blogger:SyntaxHighlighter(7)DOSコマンドをきれいに表示させるで導入。)

shBrushJQuery.min.js
(Blogger:SyntaxHighlighter(8)jQuery用のBrushを導入で導入。)

以上はSyntaxHighlighter用タグ 変換/生成ツール - ログろいどから導入させていただきました。

shBrushMakefile.js

これはlinuxBean14.04(23)Makefile用のSyntaxHighlighterのBrushファイルを作るで作成したものです。

参考にしたサイト


Releases · alexgorbatchev/syntaxhighlighter
SyntaxHighlighter v3.0.9のダウンロード元。ビルドが必要です。

GitHub - sass/node-sass: Node.js bindings to libsass
SyntaxHighlighter v3.0.9をビルドするときはnode v0.10.xでしないといけません。

GitHub - nodejs/node-gyp: Node.js native addon build tool
SyntaxHighlighter v3.0.9をビルドするときにnode-gypがnode-sassをコンパイルします。

node-gypコンパイル時に怒られるときは素直にpythonを2.7系におとす - Bye Bye Moore
今回はPythonのバージョンには問題なく、Node.jsのバージョンが原因でした。

Mac OS X install fails · Issue #217 · sass/node-sass
node-sass 0.6.7がnode v0.10.xでしか動かないことを教えてくれました。

node.js - How to use a different version of python during NPM install? - Stack Overflow
npm installで使うPythonのバージョンを指定する方法。

SyntaxHighlighter用タグ 変換/生成ツール - ログろいど
SyntaxHighlighter3.0.83付属にないブラシが公開されています。

次の関連記事:linuxBean14.04(112)SyntaxHighlighter3.0.83のshBrushXml.jsが3.0.9で動かない原因の追求

ブログ検索 by Blogger

Translate

最近のコメント

Created by Calendar Gadget

QooQ