前の関連記事：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です。
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 v４をビルドする
./node_modules/.bin/gulp build --brushes=all --theme=emacs
ブラシはallを指定してすべてにして、テーマはemacsにしました。
ビルドした結果はsyntaxhighlighter/distに出力されているはずです。
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の設定。
0 件のコメント:
コメントを投稿