日々ほげほげ研究所: SyntaxHighlighter v4をBloggerで使う

はじめに

以前，サイトでのコード修飾にSyntaxHighlighterを使っていました．このサイトはBloggerで作成しているのでファイルはgoogle siteに置く運用にしていました．
しかし，いつのころからかファイルの読み込みでエラーが起こるようになってしまいました（全然気づいていなかったのでいつのことやら．初めはうまく動いていたと思うのですが．．．．）．google siteの設定起因のような気がするのでCSSファイルの置き場を変えようというのがきっかけです．
そして，SyntaxHighlighterも以前のv3からv4になっているらしいので一緒にバージョンもあげてみるかと思ったのが沼の始まりでした．しんどかったので軌跡を残しておきます．1年後の自分に向けて．．．．
例によって環境はmacOS10.14で, homebrewが入っているとします．

Syntax Highlighterのコンパイル

スクリプトファイルを各自でコンパイルする手間とメリットが釣り合っていない気もするのですがはじめます．
公式サイト:
https://github.com/syntaxhighlighter/syntaxhighlighter
にあるBuilding instruction 通り実行すると結論からいうとうまくいきません．
この対策についてはいくつかの先行研究があり，今回は PHEXCEL.workさん[1]の手順を参考にします．
また，事前準備のNode.jsは@limoneneさん[2]の手順を参考にしています.

Node.jsのインストール

# nodebrewをインストールします

brew install nodebrew

# 初期設定のため

nodebrew setup

#を入力します
#srcなどの作業ディレクトリを作成してくれます
#次のように出力されますので
#========================================
#Export a path to nodebrew:
#
#export PATH=$HOME/.nodebrew/current/bin:$PATH
#========================================
# 指示に従ってPATHを追加します

echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bash_profile 

# installします
# 最新版を使うと後の工程でエラーになります
# v9.11.2 では問題なさそうです. v10, v11はエラーでうまくいきません．（後述注1参照）

nodebrew install v9.11.2

# インストールだけでは選択されないので

nodebrew use v9.11.2

#と入力して選択します．
# 念の為バージョンが選択されていることを確認します

nodebrew ls

# と入力すると
# v9.11.2
# current: v9.11.2
# と表示されると思います
#

SyntaxHighligterのコンパイル

# gitコマンドを使いソースコードダウンロードをします．
# git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
# 公式リポジトリを使うと後のnpm installの工程で
# TypeError: loadReposFromCache(...).error is not a function at loadRepos
# などとエラーが出ます．
# この対策がされたkarljacunchaさんのforkから進めます

cd ~
git clone https://github.com/karljacuncha/syntaxhighlighter.git

# インストール

cd syntaxhighlighter
npm install

# エラーが出ないことを確認してください（エラーが出た場合, 前述の正しいリポジトリを指定しているか確認してください）
# 次にsetup-projectを実施します

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

# エラーが出ないことを確認してください（注1）
# 次にbuildを行います

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

# ここでもエラーが出ないことを確認してください．（注2）

おまじない続きでしたが，syntaxhighliterフォルダの中に"dist"フォルダが出来ているはずです．その中に"index.html"があるのでブラウザで開いてみます．うまく動作すればブラウザでハイライトされた各種コードが表示されます．
必要なファイルは"syntaxhighlighter.js"と"theme.css"の2つです．これを適当なサーバーにアップロードします．ただ, このままアップロードするとsyntaxhighlighter.js.mapを読みにいってエラーがログに出るので（表示影響はない）syntaxhighligter.jsの最後の行の

//# sourceMappingURL=syntaxhighlighter.js.map

を削除します．これでSyntaxHighlighterのコンパイルは完了です.

（注1）

# nodebrew install で選んだバージョンが新しいと
#fs.js:129
#  throw new ERR_INVALID_CALLBACK();
#  ^
# TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
# とエラーが出ます. 
# nodebrewの使用バージョンがv9になっていることを確認してください．

（注2）

# ここで
# Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (59)
# がでることがあります.
# npm installコマンドを実行した時のnpmのバージョンと選択しているバージョンが違うときにおこるようです．．
# 私は途中でnodebrewのバージョンを下げたので引っかかりました．今回紹介しているように
# 初めからnodebrew install v9.11.2を選んでいれば起こりません
# もし起こった場合
# rm -rf ~/syntaxhighlighter
# で初めからやり直してしまいましょう．

githubへのアップロード

ファイルをアップロードする先を色々と検討しましたが，githubのwebページ機能を使うのが一番簡単で，コストがかからない方法という結論にたどり着きました．当然，アクセス数が多いサイトでは問題になりうるのでしょうが，このサイトのアクセス数程度では問題なりません．
githubのアカウントがない場合は作成します.
https://github.com
にアクセスして情報を入れて"Sign up for GitHub"をクリック．あとは指示に従います．
web登録の仕方は公式情報[3]
https://pages.github.com
を参考に進めます.
サイトはユーザーに紐づいたもの，プロジェクトに紐づいたものがつくれます. ここではユーザーに紐づいたサイトを作ります.
GitHubにアクセスしたら, 画面右上の"＋"アイコンをクリック."new Repository"を選びます
"Repository name"に
あなたのユーザー名.github.io
と入力します.
これで準備はできたのでファイルをアップロードするためターミナルで以下の作業を行います．

# リポジトリを作ります

cd ~
git clone https://github.com/あなたのユーザー名/あなたのユーザー名.github.io
cd あなたのユーザー名.github.io

# 作成したsyntaxhighlighteのファイルをコピーします．

cp ~/syntaxhighlighter/dist/* ./

#いらないファイルを消します

rm syntaxhighlighter.js.map

#
git add --all
git commit -m "Initial commit"
git push -u origin master

これでファイルはアップロードできました. 試しに
https://あなたのユーザー名.github.io
にアクセスしてみてください. イントール時にできたindex.htmlがハイライトされて表示されていると思います
ここまでうまくいっていれば"syntaxhighlighter.js"と"theme.css"の2つが
https://あなたのユーザー名.github.io/syntaxhighlighter.js
https://あなたのユーザー名.github.io/theme.css
にアップロードされています.
一応, 不要になったindex.htmlは削除しておきましょう

git rm index.html 
git commit -m "del index.html"
git push -u origin master

というわけでBloggerのヘッダーに

<script src='https://あなたのユーザー名.github.io/syntaxhighlighter.js' type='text/javascript'/>
<link href='https://あなたのユーザー名.github.io/theme.css' rel='stylesheet' type='text/css'/>

を配置すればSyntaxhighlighterを使えるようになります．なんとかなりました．

参考文献

[1] フェクセル.WORKさん "SyntaxHighlighter V4でFC2ブログでもソースコードをきれいに表示！【四苦八苦】"

[2]@limoneneさん，"Homebrewからnodebrewをインストールして、Node.jsをインストールするまで"

履歴

2019.02.10 初稿

日々ほげほげ研究所

2019年2月10日日曜日

SyntaxHighlighter v4をBloggerで使う