SyntaxHighlighter V4でFC2ブログでもソースコードをきれいに表示！【四苦八苦】

• git
• node.js v8.9.4（Macの場合nodebrewを使って入れる方法が簡単です。)
• npm

$ git clone https://github.com/karljacuncha/syntaxhighlighter.git

$ npm install

3. gulp setup-projectを実行

次のコマンドでsetup-projectを実行します。

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

FC2ブログに導入する

ファイルをアップロード

今回使うファイルは「syntaxhighlighter.js」と「theme.css」の2つのみです。この2ファイルをFC2ブログの「ファイルアップロード」を使ってアップロードします。

テンプレートに設置

テンプレートに上のJSファイルとCSSファイルを要素内に設置します。次のコードにアップロードしたファイルのURLは貼り付け、「テンプレートの編集」を開き</head>タグの直前あたりに挿入してください。

これでやっとSyntaxHighlighterが利用できます！

利用方法

ソースコードを表示するためには次のようにHTMLで記述します。

<pre class="brush: python">
print("hogehoge")
</pre>

実際に次のように表示されます：

print("hogehoge")

おわりに

以下の内容はおまけです。

./node_modules/gulp/bin/gulp.js setup-projectでエラー！

最初に下記のようなエラーが発生しました。

$ ./node_modules/gulp/bin/gulp.js setup-project
[00:44:50] Failed to load external module @babel/register
[00:44:50] Requiring external module babel-register
[00:44:50] Using gulpfile ~/src/syntaxhighlighter/gulpfile.babel.js
[00:44:50] Starting 'setup-project:clone-repos'...
[00:44:50] 'setup-project:clone-repos' errored after 614 μs
[00:44:50] TypeError: loadReposFromCache(...).error is not a function

Failed to load external module @babel/register

このエラーは無視してもビルドには問題がないようです。原因はgulpがv3.9.1なために起こるエラーだそうです。このエラーを解消するためは下記のコマンドでv3.9.0に戻せばなおるようです。

$ npm uninstall gulp
$ npm install gulp@3.9.0

TypeError: loadReposFromCache(…).error is not a function

正規のリポジトリで実行するとこのエラーが発生してしまうようです。代わりにこのエラーを修正したkarljacuncha/syntaxhighlighterを用いることで解消しました。

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

上のエラーが修正できても次のエラーが発生しました。これはnode.jsがv10.0.0だったために発生していたようです。nodebrewで直ちにv8.9.4を入れることで解消しました。

[00:56:01] Starting 'setup-project:clone-repos'...
fs.js:124
throw new ERR_INVALID_CALLBACK();
^
TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

./node_modules/gulp/bin/gulp.js build –brushes=all –theme=defaultでエラー！〜

一つ上のエラー修正後に「Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (57)」というエラーが発生しました。これはnode.js v10.0.0でnpm installしてしまったために起こったようです。

$ ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default
[01:00:41] Requiring external module babel-core/register
[01:00:42] Using gulpfile ~/src/syntaxhighlighter/gulpfile.babel.js
[01:00:42] Starting 'build'...
[01:00:42] Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (57)
For more information on which environments are supported please see:
Release v3.13.1 · sass/node-sass
Fixes

Removed top-level return statement from cli (@bfred-it, #1826)
Check options to be an object (@tnguyen14, #1824)
Bump sass-spec@^3.3.6-5 (@xzyfer)
Update...

「rm -rf node_modules」をして再度「npm install」からやり直すことで解消しました。