ふと検索結果から自分のブログへアクセスしたところ、PowerShellのコード表示に使っていたSyntaxHighlighterが崩れているのに気づき、
http://alexgorbatchev.com/SyntaxHighlighter/ でお借りしていたv3ではなく、そろそろ自分でv4を用意して、ついでにBlogspotのHTTPS化をすることにしましたので、その際の覚え書きです。
※ Blogspotの常時HTTPSを有効にすると、SyntaxHighlighterのスクリプトをお借りしていたhttp://alexgorbatchev.com/ へのリンクがHTTPだったため、Chromeでは警告が上がりそのままではスクリプトが動作しないため、今までブログ自体はHTTPのままにしていました。
今回たまたま記事の中身がhtmlそのまま出力されていた事に気付き、こりゃまずいと類似事例を探すと昨年末くらいから幾人かが実施していたので、それを模倣しました。
SyntaxHighlighter v4
SyntaxHighlighter v4は現在はGitHubで公開されており、自分でBuildする必要があります。
https://github.com/syntaxhighlighter/syntaxhighlighter
Build方法もサイトにあります。
https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
Photon OS 2.0でBuild環境を作る
Windows 10 のWSLでBuildするか、何か違うもので実施するかを考え、せっかくなのであまり使っている人がいないPhoton OS (v2)で試してみました。
Photon OSもGitHubで公開されているVmwareが開発主導のクラウドネイティブ・コンテナプラットフォームとしての利用を前提とした軽量Linuxです。
vCSA6.5以降など、Vmwareの仮想アプライアンス製品のベースにもなっています。
https://vmware.github.io/photon/
ISOイメージインストーラの他、最小構成で組まれたOVAがいくつか公開されています。
今回はVmware Workstationにデプロイし、SyntaxHighlighterのBuild環境にしました。
※Photon OSのセットアップ、SSHの有効化などは省略します。
Photon OS v2ではgitコマンドは最小構成でも最初から使えます
SyntaxHighlighter v4のBuild
公式のBuild手順に沿って、進めていきます。
https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install
npmコマンドはインストールされていないので、nodejsをリポジトリから落としてきます。
※Photon OSはyum互換のtdnfがパッケージ管理ツールとなっています。
nodejsがインストール出来たら、npm install を実行します。
続いてのsetup-projectでFailします。
root@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js setup-project
[12:40:50] Failed to load external module @babel/register
[12:40:50] Requiring external module babel-register
[12:40:51] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:40:51] Starting 'setup-project:clone-repos'...
[12:40:51] 'setup-project:clone-repos' errored after 1.15 ms
[12:40:51] TypeError: loadReposFromCache(...).error is not a function
at loadRepos (/root/syntaxhighlighter/build/setup-project.js:39:48)
at Gulp. (/root/syntaxhighlighter/build/setup-project.js:48:5)
at module.exports (/root/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/root/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/root/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/root/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
at /root/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)
(node:2815) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/root/syntaxhighlighter/.projects-cache.json'
(node:2815) [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.
ググると先人達の幾人かがBlogにアップしていて、以下のスレッドで回避用のリポジトリが用意されていたのでそちらを利用してやり直しました。
https://github.com/karljacuncha/syntaxhighlighter.git
参照スレ
https://github.com/syntaxhighlighter/syntaxhighlighter/issues/428#issuecomment-360562686
元々標準テーマで利用していたのと、v4からはブラシが1つにまとめられたので、ブラシの指定はAllにしました。
./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default
root@photon-01 [ ~ ]# git clone https://github.com/karljacuncha/syntaxhighlighter.git
Cloning into 'syntaxhighlighter'...
remote: Counting objects: 3507, done.
remote: Total 3507 (delta 0), reused 0 (delta 0), pack-reused 3507
Receiving objects: 100% (3507/3507), 5.93 MiB | 2.45 MiB/s, done.
Resolving deltas: 100% (1772/1772), done.
root@photon-01 [ ~ ]# cd syntaxhighlighter
root@photon-01 [ ~/syntaxhighlighter ]# npm install
npm WARN deprecated babel-preset-es2015@6.24.1: ?
Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
~省略~
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 985 packages in 131.415s
root@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js setup-project
[12:52:06] Failed to load external module @babel/register
[12:52:06] Requiring external module babel-register
[12:52:06] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:52:06] Starting 'setup-project:clone-repos'...
(node:4077) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
git clone https://github.com/syntaxhighlighter/SyntaxHighlighter-Site.git
git clone https://github.com/syntaxhighlighter/syntaxhighlighter-match.git
git clone https://github.com/syntaxhighlighter/opts-parser.git
~省略~
oot@photon-01 [ ~/syntaxhighlighter ]# ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default
[12:53:00] Failed to load external module @babel/register
[12:53:00] Requiring external module babel-register
[12:53:00] Using gulpfile ~/syntaxhighlighter/gulpfile.babel.js
[12:53:00] Starting 'build'...
[12:53:02] Theme: default
[12:53:02] Brushes: applescript, as3, base, bash, coldfusion, cpp, csharp, css, delphi, diff, erlang, groovy, haxe, java, javafx, javascript, perl, php, plain, powershell, python, ruby, sass, scala, sql, swift, tap, typescript, vb, xml
[12:53:02] Hash: cdcdfc450da96aec935d
~省略~
[52] ./~/domready/ready.js 1.13 kB {0} [built]
[53] ./src/dasherize.js 526 bytes {0} [built]
[12:53:02] Finished 'build' after 2.27 s
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]#
root@photon-01 [ ~/syntaxhighlighter ]# ls dist/
index.html syntaxhighlighter.js syntaxhighlighter.js.map theme.css
無事にファイルが"dist"フォルダに作成されたので、CSSとJSファイルをHTTPSを有効にした個人の別のスペースにアップし、BlogSpotのテーマファイルにリンクを追記します。
これで SyntaxHighlighter の表示も正常になり、BlogSpotの常時HTTPS化も問題なく動作しました。
.png)
