linuxBean14.04(113)SyntaxHighlighter v4のビルド

SyntaxHighlighter v4のビルドはBuildingの通りやればできました。gitをインストールしておく必要があります(linuxBean14.04(24)git-guiとgitkのインストール参照。)

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


GitHubリポジトリをローカルにクローンしてnpm installで必要なパッケージをインストールする

pq@HP6730b1:~/ダウンロード$ nvm current
v6.1.0
使用したNode.jsは最新のstableのv6.1.0です。

ダウンロードしたいフォルダでTerminalを開き次のコマンドを実行します。

git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
pq@HP6730b1:~/ダウンロード$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
Cloning into 'syntaxhighlighter'...
remote: Counting objects: 3496, done.
remote: Total 3496 (delta 0), reused 0 (delta 0), pack-reused 3496
Receiving objects: 100% (3496/3496), 5.95 MiB | 1.56 MiB/s, done.
Resolving deltas: 100% (1738/1738), done.
Checking connectivity... done.
syntaxhighlighterフォルダがそこに作成されますので、そこに移動してnpm installします。
cd syntaxhighlighter
npm install

SyntaxHighlighter v4 npm install
> execSync@1.0.2 install /home/pq/ダウンロード/syntaxhighlighter/node_modules/execSync
> node install.js

[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
    Native code compile failed!!
execSyncのコンパイルの失敗についてはerror while 'npm install execSync' · Issue #20 · mgutz/execSyncに書いてあるようにnode v0.11以降ではnativeでサポートされるようになったので非推奨になったのが原因のようです。

このパッケージを使っているパッケージ(codecov@1.0.1)がnode v0.10以前の互換性のためにpackage.jsonに入れてあるようです。

このまま次に進んでも支障ありませんでした。

追加で必要なGitHubリポジトリをダウンロードする


SyntaxHighlighterにあるブラシやテーマのGitHubリポジトリをsyntaxhighlighter/reposフォルダにダウンロードします。

./node_modules/.bin/gulp setup-project

これで準備完了です。

ブラシとテーマを指定してSyntaxHighlighter v4をビルドする


./node_modules/.bin/gulp build --brushes=all --theme=emacs

ブラシはallを指定してすべてにして、テーマはemacsにしました。

ビルドした結果はsyntaxhighlighter/distに出力されているはずです。

index.htmlをクリックすると各ブラシのサンプルが見れます。

applescriptのブラシは黒の背景だとも文字が埋もれていますね。

UTF-8の半角スペースには2種類あるの問題は起きません。
  <script type="text/javascript" src="syntaxhighlighter.js"></script>
  <link type="text/css" rel="stylesheet" href="theme.css">
この2行を挿入するだけでpreタグでシンタックスハイライトされるようになります。

それは便利になったのですが、syntaxhighlighter.jsを読んでもどこからスクリプトが始まるかわかりませんね。

Configurationの設定


Configuration · syntaxhighlighter/syntaxhighlighter Wiki

ここにCofigurationの解説があります。

Blogger:SyntaxHighlighter(5)Configurationを設定するのSyntaxHighlighter v3の項目と比較するとcollapseとtoolbarの解説がありません。

でもdefaults.jsにはcollapseの項目があるのでこれは設定できそうです。

toolbarは廃止されたようです。

Global Configurationだけに設定できる項目であるbloggerMode、expandSource、stripBrs、tagNameの解説もありません。

config.jsにはexpandSource以外の項目があるのでconfig.jsにある項目は設定できそうです。
SyntaxHighlighter.config.bloggerMode=false;
SyntaxHighlighter.defaults['toolbar']=false;
SyntaxHighlighter.defaults['auto-links']=false;
現在SyntaxHighlighter3.0.83と使っているこのブログではこのConfigurationにしています。(linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法)
<script>
 syntaxhighlighterConfig = {
   'auto-links': false
 };
</script>
デフォルトからの変更点はこのauto-linksだけです。

Configurationの例にならうとauto-links: false、でいけそうですがこれは動かずdefaults.jsと同じ形式で書く必要がありました。

Chromiumの検証でデバッガにかけてみる



syntaxhighlighter.jsを読んでもどこにブレークポイントを設定していいのかわからなかったので、index.htmlに設定してオプションの部分にブレークポイントを設定しました。

そこからStep overしていくとready.jsに入りました。

これはdomreadyパッケージで、SyntaxHighlighterの作動するタイミングを改善してくれるものです。


そのままStep overして23行目でStep intoします。

2回Step intoするとlistener()からindex.jsに入ります。


ここでStep intoするとdasherize.jsに入りますがそこはStep overですり抜けてまたindex.jsに戻ってきたところでもう一度Step intoするとcore.jsに入れました。


ここがcore.jsが実行される最初とわかりました。

ソースマップ(syntaxhighlighter.js.map)


Chromiumでindex.htmlにブレークポイントをかけたあと進んでいくとsyntaxhighlighter.jsではなくソースのcore.jsに入ったのはソースマップ(syntaxhighlighter.js.map)のおかげです。

このファイルはビルドすると自動的に作成されます。


syntaxhighlighter.js.mapがないとwebpack://以下が表示されません。

でもsyntaxhighlighter.js.mapがなくてもSyntaxHighlighterは動作します。


Source Map detected.は実際にソースマップファイルを見ているわけではなく末行にある//# sourceMappingURL=syntaxhighlighter.js.mapをみているだけで、syntaxhighlighter.js.mapがなくてもこの行があればソースマップファイルがあると言ってきました。

参考にしたサイト


Building · syntaxhighlighter/syntaxhighlighter Wiki · GitHub
SyntaxHighlighter v4のビルド方法。

error while 'npm install execSync' · Issue #20 · mgutz/execSync · GitHub
execSyncパッケージの機能はnode v0.11以降ではnativeでサポートになったようです。

SyntaxHighlighter · GitHub
ブラシやテーマも個別のGitHubリポジトリになっています。

Configuration · syntaxhighlighter/syntaxhighlighter Wiki
SyntaxHighlighterの設定。

次の関連記事:linuxBean14.04(114)「./myscript」「myscript」「source myscript」「. myscript」の違い

PR

0 件のコメント:

コメントを投稿