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;
}

SyntaxHighlighter v4をWindows10でビルドする方法～準備編～

SyntaxHighlighterとは

SyntaxHighlighter is THE client side highlighter for the web and web-apps!

とあるようにwebサイトなどで各種コードをハイライト表示してくれるものです。
サンプルはこちら

v3までは既にビルドされたものがZIPでダウンロード出来たみたいなのですが、v4からは各ユーザーが自分でビルドしなければいけないみたいです。
ですが、githubに書かれているビルド方法はWindows向けではないようです。
Linuxやmacなら良いのですが、残念ながら私の手元にそれらの環境がないので、WindowsでLinux環境を入手する方法を調べてみました。

主だった候補としては以下の3つでしょうか。

1. Windows Subsystem for Linux(WSL)
2. AWSなどでLinuxインスタンスを作成
3. Hyper-VやVMwareなどの仮想化環境

1.はWindows 10 Fall Creators Updateが2017/10/17にリリースされたこともあって大変興味を唆られるのですが、Linux環境を十分に再現できるのかと言われると少々不安なところです。
2.は手軽に構築でき、動作についても問題ないのですが今回の目的には少々オーバーかと思います。それにお金の支払が発生してしまうので躊躇してしまいます。
3.は今や古典的な方法ですが、仮想化技術は確立されており個人使用でも問題ない物が提供されています。Hyper-VはWindowsの一機能として提供されているのも魅力的です。
以上のことから3.のHyper-VによるLinux環境を構築しようと思います。

Hyper-V をインストールするための前提条件
（これはWindows Server 2008 R2が対象なので古い記事です）

Hyper-V の役割をインストールして使用するには、以下が必要です。

• x64 ベース プロセッサ。Hyper-V は、Windows Server 2008 の x64 ベース バージョン (具体的には Windows Server 2008 Standard、Windows Server 2008 Enterprise、および Windows Server 2008 Datacenter の x64 ベース バージョン) で使用可能です。
• ハードウェア補助による仮想化。仮想化オプションを含むプロセッサ、具体的には Intel Virtualization Technology (Intel VT) または AMD Virtualization (AMD-V) で使用可能です。
• ハードウェア強制のデータ実行防止 (DEP) が使用可能で、有効になっている必要があります。具体的には、Intel XD ビット (eXecute Disable bit) または AMD NX ビット (No eXecute bit) を有効にする必要があります。

Windows 10 Hyper-V のシステム要件（こちらがWindows 10での要件）

Hyper-V は、Windows 8 以降の 64 ビット版 Windows Professional、Enterprise、および Education のエディションでのみ使用できます。 Hyper-V には、第 2 レベルのアドレス変換 (SLAT) 機能が必要です。SLAT とは、Intel と AMD が提供する最新世代の 64 ビット プロセッサに搭載されている機能です。

纏めると、

1. 64bitCPUか？
2. CPUがIntel VT(もしくはAMD-V)に対応しているか？
3. CPUがDEPに対応しているか？
4. CPUがVT-cに対応しているか？
5. CPUがSLATに対応しているか？
6. OSが64bit版かつProfessional、EnterpriseもしくはEducationか？

でしょうか。ただ、SLATに対応していれば1.から4.にも対応していると思うので、重要なのはSLATに対応しているかだと思います。
※PCの環境にもよりますが、2.から5.はBIOSでdisableにされていないか確認して下さい。

これら前提条件を満たしているか調べるには、コマンドプロンプトから
>systeminfo
を実行して下さい。

 日本語

英語

Hyper-Vに関する箇所が全て”はい”（もしくは”Yes”）なら動かすことが出来ます。
※VM Monitor Mode Extensionsが上記4.のVT-cの事です。
※Virtualization Enabled In Firmwareが上記2.のIntel VTの事です。
※Second Level Address Translationが上記5.のSLATの事です。
※Data Execution Prevention Availableが上記3.のDEPの事です。

Windows 10 上に Hyper-V をインストールする
管理者権限でPowerShellを起動します。
Enable-WindowsOptionalFeature -Online -FeatureName:Microsoft-Hyper-V -All
を実行します。

このように進捗が表示されるので終わるまでしばらく待ちます。

再起動するか聞かれるのでYを押して再起動します。

再起動が終わったらHyper-Vが有効になったか確認します。
管理者権限でPowerShellを起動し、
Get-WindowsOptionalFeature -Online  | ? FeatureName -Match "Hyper-V"
を実行します。

ここからubuntuのisoをダウンロードします。
また、こちらから日本語 Remixがダウンロード出来ます（私はここからubuntu-ja-16.04-desktop-amd64.isoをダウンロードしました）。
※2017/12/30現在、Ubuntu 17.10に一部PC(Lenovo, Acer)で発生するバグがあるため配信停止されています。

Hyper-V マネージャーを起動します。
※Hyper-Vはバージョン: 10.0.16299.15を使用しています。

[操作]→[サーバーに接続]からローカルコンピューターを選択します。

右側の[操作]から[クイック作成]を選択します。

今回はUbuntuを入れるので[ローカルインストール元]を選択します。
※Windows セキュア ブートは無効にします。
先程ダウンロードしておいたubuntu-ja-16.04-desktop-amd64.isoを選択し、仮想マシンを作成します。

後はUbuntuのインストーラーに従ってインストールして下さい。

テスト

テスト

引用

あいうえお

int main() {
 return 0;
}