SyntaxHighlighter v4をWindows10でビルドする方法～本番編～

githubに書かれているビルド方法に従ってSyntaxHighlighter v4を入れてみようと思います。
※gitが入っていない場合はsudo apt install gitとしてgitをインストールしておいて下さい。
※npmが入っていない場合はsudo apt install npmとしてnpmをインストールしておいて下さい。
※nodeが入っていない場合はsudo apt install nodejs-legacyとしてnodeをインストールしておいて下さい。

で、サイトに従って以下のコマンドを実行していきます。

$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install

次に

$ ./node_modules/gulp/bin/gulp.js  setup-project

を最初に実行するように書かれているので（RUN THIS FIRST!ってそういう意味だよね？）素直に実行します。

sin@Ubuntu-Virtual-Machine:~/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js  setup-project
[01:42:04] Failed to load external module @babel/register
[01:42:04] Requiring external module babel-register
[01:42:04] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[01:42:04] Starting 'setup-project:clone-repos'...
[01:42:04] 'setup-project:clone-repos' errored after 1.67 ms
[01:42:04] TypeError: loadReposFromCache(...).error is not a function
    at loadRepos (/home/sin/syntaxhighlighter/build/setup-project.js:39:48)
    at Gulp.<anonymous> (/home/sin/syntaxhighlighter/build/setup-project.js:48:5)
    at module.exports (/home/sin/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
    at /home/sin/syntaxhighlighter/node_modules/gulp/bin/gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
    at Function.Module.runMain (module.js:444:11)

babel-registerという外部モジュールの読み込みに失敗しているようなので調べてみます。

sin@Ubuntu-Virtual-Machine:~/syntaxhighlighter$ npm ls --depth=0 babel-register
syntaxhighlighter@4.0.1 /home/sin/syntaxhighlighter
├── babel-cli@6.26.0
└── babel-register@6.26.0

babel-registerはインストールされているようです。
ちなみに、gulpのバージョンは3.9.1が入っていました。

sin@Ubuntu-Virtual-Machine:~/syntaxhighlighter$ npm ls --depth=0 gulp
syntaxhighlighter@4.0.1 /home/sin/syntaxhighlighter
└── gulp@3.9.1

で、色々調べたら、どうもgulpのバージョンが3.9.1だと発生する問題みたいで、3.9.0へ戻せば"Failed to load external module @babel/register" は消えてくれるとのこと。

$ sudo npm uninstall -g gulp
$ sudo npm install -g gulp@3.9.0
$ npm uninstall --save-dev gulp
$ npm install --save-dev gulp@3.9.0

で、もう一度 gulp.js  setup-projectを実行してみます。

sin@Ubuntu-Virtual-Machine:~/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js  setup-project
[19:34:26] Requiring external module babel-core/register
[19:34:27] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[19:34:27] Starting 'setup-project:clone-repos'...
[19:34:27] 'setup-project:clone-repos' errored after 2.33 ms
[19:34:27] TypeError: loadReposFromCache(...).error is not a function
    at loadRepos (/home/sin/syntaxhighlighter/build/setup-project.js:39:48)
    at Gulp.<anonymous> (/home/sin/syntaxhighlighter/build/setup-project.js:48:5)
    at module.exports (/home/sin/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/sin/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
    at /home/sin/syntaxhighlighter/node_modules/gulp/bin/gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
    at Function.Module.runMain (module.js:444:11)

"Failed to load external module @babel/register"は無くなりましたが、
"TypeError: loadReposFromCache(...).error is not a function"というエラーは依然として残ったままです。
この件についてissueの方にBuilding: loadReposFromCache(...).error is not a function #428として挙がっています。
karljacunchaさんがforkしたものがGitHubに上がっているのでこちらで試してみます。

$ git clone https://github.com/karljacuncha/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install
$ ./node_modules/gulp/bin/gulp.js  setup-project 

として実行したところ、今までエラーが出ていた箇所も無事に通りました。
準備が整ったので、次はビルドを行います。

$ ./node_modules/gulp/bin/gulp.js build --brushes='all' --theme=default

を実行すると無事にdistディレクトリにsyntaxhighlighter.jsとtheme.cssが生成されました。
後はこれらのファイルを各々のブログ等に組み込んで下さい。

※補足
私はBloggerに組み込む時にGoogleDriveによるWebホスティングをやろうとしたのですが、どうもGoogleさんはGoogleDriveによるWebホスティングを禁止したようなので断念しました。
なので、手っ取り早く「HTML/JavaScript」ガジェットを追加してsyntaxhighlighter.jsの中身をそのままコピー。
theme.cssは[テーマ]→[カスタマイズ]→[上級者向け]→[cssを追加]で同じく中身をコピーしました。
今後.jsや.cssが増えて、外部化した方が良いくらいに重くなったら何かしらのWebホスティングを行うかも…

最後に、syntaxhighlighterのブラシにcppを指定した例

int main() {
    return 0;
}