SyntaxHighlighter v4 に更新しました

このブログでのソースコード表示には SyntaxHighlighter をつかっていたのですが、
ホスティングしているところが https 対応してないためブログ自体のHTTPS化が遅れておりましたが、
（※ただやってなかっただけです）
この度 V4 移行し、github.io に置くようにして対応しました。

いくつかハマりどころがあったので備忘録として残しておきます。

概要

SyntaxHighlighter v4 は、自分でビルドしてその結果をアップロードする必要があります。
今回は、ビルド対応のためリポジトリの Fork をし、Fork したリポジトリの Github Pages にビルド結果を置くようにしました。
origin: https://github.com/syntaxhighlighter/syntaxhighlighter
fork: https://github.com/srz-zumix/syntaxhighlighter
pages: https://srz-zumix.github.io/syntaxhighlighter/

SyntaxHighlighter v4 のビルド

SyntaxHighlighter は Github で公開されております。
基本的には、こちらの Wiki の手順通りにやればビルドできるはずです。
https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building

ですが、現状途中で躓いてしまうようでうまくビルドができません。

[22:53:04] Failed to load external module @babel/register
[22:53:04] Requiring external module babel-register
[22:53:04] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[22:53:04] Starting 'setup-project:clone-repos'...
[22:53:04] 'setup-project:clone-repos' errored after 947 μs
[22:53:04] TypeError: loadReposFromCache(...).error is not a function
    at loadRepos (/syntaxhighlighter/build/setup-project.js:39:48)
    at Gulp. (/syntaxhighlighter/build/setup-project.js:48:5)
    at module.exports (/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
    at /syntaxhighlighter/node_modules/gulp/bin/gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
(node:29211) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/syntaxhighlighter/.projects-cache.json'
(node:29211) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

しかしながら、解決方法は先人の方々が残されていますので、そちらを参考にして解決しました。
はてなブログで SyntaxHighlighter V4 を使ってみました - プログラマーのメモ書き
自分は、Fork して上記ブログで紹介されている解決策にかかれている修正を取り込みました。

Docker 上でビルド

上記修正を取り込んでも自分の Windows マシン上ではうまくビルドできなかったので、Docker 上でビルドしました。ビルドしたイメージは Dockerhub で公開しています。
https://hub.docker.com/r/srzzumix/syntaxhighlighter/

Github Pages で公開

Fork したリポジトリにビルド結果を push するだけですが、今回は Travis CI でビルド → Github Page にデプロイまでやりました。
.travis.yml は以下のとおり。

language: node_js
sudo: false
node_js:
  - '8'

before_script:
  - npm install -g gulp-cli
  - npm install

script:
  - sh ./build.sh
  - ls ./docs

notifications:
  email: false

deploy:
  provider: pages
  local-dir: docs
  skip-cleanup: true
  github-token: "$GITHUB_TOKEN"
  keep-history: true
  on:
    branch: master

env:
  global:
    secure: tbvP6BgRFAhw5id/i8I5Q6tL7dhkmd4tSzwgfOhO5qt16QpzvkES95rma+DOjjVKXbd8Zbpxz5Eax7nuEtH9BxXby0+IxtkeKfZ0nsNr249nFnDLqNVved+iRY6LYxZM2YwlwYOwnsAUbJ6yzk46zjgVVlgyerS7+of/MFzlHlWOwnVF4mJg1gQL9QPodJ1LEsfeUlxjDWuSZayR8KP3/kziMbAo+/F9sL3FEdWgSYU7Ew98KRk0W89sHISKGCJqPljU/VIFYnR6iyzc+QC808MzvqX/iiUKkJJ7N90IZUaC9XqAyArTYun9NKKMR9PKwGzpqUH4Dj57KILmwxaLWfBbNv7T380p/5P+izu1UNY3aaDpaJrtaMK0UYLgjyvev37OTc0VY5mFqUZk7OCLVUhisU34sKkj2oQ6CPvB+dKkvydscjhjVuPYFYb96VhNzena8UYezo1aW1cUNTKRAPcDbQFUO5dr+KFJ9dud+bI0gSIpvbdLPyqdnItWNmXu++eZ6JIpE3hxpZEmkxZOuR6B30aXM3EQiBg+YMQqitAgRKOUsejAWY04GA27MwqfD0JO4bH4gZGFeVUfVECrbjr5L7fuD2qHMAr1ahUc4TLE9cYPCMlXRNzIyL4GfjZtNkkKFDUb9Wu/rpuS8M4kDIDqIejhtOf9EKrNBRVmf1s=

このへんは別の記事にしたのでそちらを参考にしてみてください。
ブログズミ: Travis CI から github に push する

Blogger に組み込み

GitHub Pages にデプロイできたらあとはブログに組み込むだけです。
（SyntaxHighlighter を紹介してる記事でたまにここが間違ってる場合があったので、注意してください。）

最後に

これにて https 化完了です。お疲れ様でした。