IT系の話題を幅広く取り扱います。iPhone、Mac、アプリ開発、ダウンロード方法など。
新着記事

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

オープンソース
FC2でもはてなブログのようにソースコードをきれいに載せたい!と思いオープンソースのSyntaxHighlighter V4を導入した話を記します。
簡単に導入することはできませんでしたが、結果的にFC2ブログでもきれいにソースコードを紹介できるようになりました。
今回は、備忘録のような形でSyntaxHighlighter V4の導入過程を紹介します。

スポンサーリンク

はじめに

SyntaxHighlighter V4はビルド済みのものが提供されていないため自分でビルドする必要があります。ビルドに必要なものは以下のとおりです。
  • git
  • node.js v8.9.4(Macの場合nodebrewを使って入れる方法が簡単です。)
  • npm
2018/05現在、nodebrewでlatestを入れるとv10.0.0が入りますがこれではビルドでエラーが発生した(後述)ため、v8.9.4を導入してください。
大まかな流れは次のとおりです:
  1. SyntaxHighlighterをビルド
  2. 必要ファイルをアップロード
  3. テンプレートに設置

SyntaxHighlighterをビルドする

1. SyntaxHighlighterをクローン

まず、Terminalを開いて下記のコマンドでSyntaxHighlighterをクローンします。

$ git clone https://github.com/karljacuncha/syntaxhighlighter.git
正規のリポジトリはsyntaxhighlighter/syntaxhighlighterですが、gulp実行中に「TypeError: loadReposFromCache(…).error is not a function」というエラーが発生するため上のforkされたリポジトリを利用します。

2. npm installを実行

下記のようにnpm installを実行します。このときnode.jsはv8.9.4を使ってください。v10.0.0で実行したところビルドエラーになりました。またPythonがv3以上でもエラーが発生します。適当にシステム標準のPythonなどに戻しておく必要があります。なおこの処理には少々時間がかかります。

$ npm install

3. gulp setup-projectを実行

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

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

gulp buildでビルド実行

ここまででやっとビルド準備が整ったので下記コマンドでビルド実行します。このbrushesやthemeの値は変更も可能です。変更する場合はこちらを参考にしてみてください。
$ ./node_modules/gulp/bin/gulp.js build --brushes='all' --theme=default

ビルドが正常に終わると「dist」フォルダに次の4つのファイルが生成されます。

  • index.html
  • syntaxhighlighter.js
  • syntaxhighlighter.js.map
  • theme.css

FC2ブログに導入する

ファイルをアップロード

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

テンプレートに設置

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



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

利用方法

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

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

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

print("hogehoge")

利用可能言語

SyntaxHighlighterで利用できる言語は標準で29ぐらいあるようです。Python、Ruby、HTML、CSS、C、Java、Swiftなどが利用できます。詳しくはこちら

おわりに

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

今回はビルドエラーが発生しまくったので参考程度にまとめてみました。

./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:
:rainbow: Node.js bindings to libsass. Contribute to sass/node-sass development by creating an account on GitHub.

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

コメント

  1. Bunatree says:

    SyntaxHighlighter v4 のビルドがうまく行かず、あちこちの情報サイトを探してトライ&エラーを何時間も繰り返してきましたが、この記事のおかげですべての問題を解決してビルドに成功しました。
    Node.js の stable バージョンを安易に選択せず v8.9.4 を指定する必要があるということは、この記事を読むまで全くわかりませんでした。
    助かりました。ありがとうございます!