SyntaxHighlighter 3.0.9 を node.js でビルドする

no extension

以前 SyntaxHighlighter を導入したが，このときのバージョンは 3.0.83 だった。 しかし GitHub のリポジトリを見ると 3.0.9 がリリースされているようである。 3.0.9 はソースコードのみの提供で，実際に使うためには node.js でビルドする必要がある。

まぁ，でも， node.js はちょっと興味があったので実際にやってみることにした。 最近 node.js を要件とするプロジェクトが多いんだよね。

Windows 環境に node.js をインストールする

なんと！ node.js って Windows でも動くんだ。 知らなかった。 ならやってみるしかないよねぇ。

ダウンロードページを見ると各 OS ごとにパッケージが用意されている。 私は 64bit 版のインストーラを選択。

インストールは言いなりでOK。 インストールが終わったらコマンドプロンプトで node.exe を起動して PATH が通ってることを確認する。 

> node -v
v0.10.32

インストールを行うとインストールフォルダと %HOMEPATH%\AppData\Roaming\npm フォルダに PATH が通るようになるのだが，この %HOMEPATH%\AppData\Roaming\npm フォルダが曲者で，インストールを行っただけではフォルダを作ってくれないみたい（うちの環境の問題かもしれないけど）。 このときは手動で %HOMEPATH%\AppData\Roaming\npm フォルダを作ってあげるとよい（%HOMEPATH%\AppData フォルダは隠しフォルダになっているのでお気をつけを）。 %HOMEPATH%\AppData\Roaming\npm フォルダの中身は空で大丈夫。

では簡単な動作確認を。 みんな大好き “Hello World!”。

以下を記述した hello.js を作る。 

console.log('Hello World!');

これをコマンドプロンプトから実行して 

> node hello.js
Hello World!

と表示されれば大丈夫。 まぁ今回はサーバ環境を作るわけではないので，これでOKとする。

SyntaxHighlighter 3.0.9 をビルドする

まずは SyntaxHighlighter のリポジトリから 3.0.9 のソースコードを取得する。 これを適当な場所に展開して npm install を実行する。 

> cd syntaxhighlighter-3.0.9
> npm install

ちなみに Windows 環境では npm の実体は npm.cmd になっていて，中で node.exe を呼び出している。 （後述する bower や grunt も同様）

成功すると node_modules フォルダができているので，さらに次のコマンドを実行する。 

> node_modules\.bin\bower install

bower は内部で git コマンドを呼び出す（GitHub から必要なコンポーネントを取得するため）。 したがって，あらかじめ git がインストール済みで PATH が通っている必要がある。

では，いよいよビルド。 次のコマンドを実行する。 

> node_modules\.bin\grunt build
Running "clean" task

Running "compile_sass" task


Running "copy_misc_files" task


Running "build_core" task


Running "pack" task


Running "validate" task


Running "add_header" task


Done, without errors.

ビルドが成功すれば pkg フォルダに目的のファイルが生成されているはずである。 使い方は 3.0.83 のときと同じ。 なお shCore.js は shCore.min.js に置き換えれるのでお試しを。

ちなみに 

> node_modules\.bin\grunt test
Running "clean" task

Running "compile_sass" task


Running "copy_misc_files" task


Running "build_core" task


Running "pack" task


Running "validate" task


Running "add_header" task


Running "express" task
>> You can access tests on http://localhost:3000 (Ctrl+C to stop)

としてブラウザで http://localhost:3000 を開くとデモ画面が見れる。

続きは Web で

node.js に関する参考ページ。