https対応! bloggerにおけるSyntaxHighlighter v4の導入

これまでの記事で、SyntaxHighlighter v3の導入とbloggerでのモバイルページ表示対応をメモって来ました。ただ、これまでの対応だとbloggerをhttps化した際に、参照していたalexgorbatchev.comがhttps未対応であるがゆえにエラーとなってしまいcssおよびjsのロードができずにいました。今回は、

• SyntaxHighlighterをv4にバージョンアップしつつ、
• https化を可能とする

ことをメモします。

はじめに、まずSyntaxHighlighterをBloggerに導入する手法として、SyntaxHighlighterをBloggerのウィジェットとしてロードする手法とします。その設定については過去のメモ(BloggerにおけるSyntaxHighlighter ver.3.x および Blogger モバイルページにSyntax Highlighterを適用する)において説明しているので今回はスキップします。後で修正すべきところで参照します。

今回はSyntaxHighlighterをVer.4.0.1にバージョンアップしつつ、httpsに対応させます。具体的には、Ver.4.0.1のソースコードをgitで取得し、ビルド。ビルドしたcssとjsをGoogle Siteにホスティングさせます。これによってhttpsによるcssとjsのダウンロードが可能となり、かつ、正しいContent-Typeで取得できるのでbloggerのサイトでそのまま使うことができます。

では、はじめましょう。

1. はじめにビルド。
1. 基本的にhttps://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Buildingに書いてある通りに実施。※Linux上での作業が良いかと思われる。
• apt install git npm
• git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
• cd syntaxhighlighter
• npm install
2. ここで右の修正を手で加える: https://github.com/syntaxhighlighter/syntaxhighlighter/issues/428#issuecomment-369230312

-- node_modules/songbird/lib/songbird.js.orig  2018-10-22 00:34:53.614001000 +0900
+++ node_modules/songbird/lib/songbird.js       2018-10-12 18:34:51.457000000 +0900
@@ -3,7 +3,8 @@
   var Promise, base, definePromiseProperty, i, len, proxyAll, proxyBuilder, ref, synchronize,
     slice = [].slice;

-  Promise = global.Promise || require("bluebird");
+//  Promise = global.Promise || require("bluebird");
+  Promise = require("bluebird");

   module.exports = Promise;

  

3. 続けてgulpでビルドする。
• ./node_modules/gulp/bin/gulp.js setup-project
• ./node_modules/gulp/bin/gulp.js build --help
• ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=midnight --compat
※ なおnode_moduleの下のgulpを使うとビルドが通らなかった。apt install gulpをするとシステムにインストールされる。これを用いてビルドすることも可能(実行ファイルはgulp.jsではなく、拡張子なしのgulpとなる。) ※ --compatを付けることでver.3.xからの移植がしやすくなる。具体的にはJavascriptでWindow変数に、SyntaxHighlighterオブジェクトとXRegExpオブジェクトが紐づけられる。もしver.3.xを使っていなければ、--compatは不要。
2. つぎにGoogle SiteへのアップロードとGoogle Site内でのテストを行う
• つぎのページを参考にgadgetとして、アップロードしたcssとjsを読み出す: https://qiita.com/ms32/items/8cd40ebc8c4fecc60df4
• 新しいGoogle Siteでもできるのだろうが、やり方がいまいちわからない。左下に"以前のGoogleサイトに戻す"というリンクがある。それから昔のGoogleサイトの操作が可能で、ファイル添付(アップロード)が可能になる。
3. 最後にBloggerに指定する。
1. 以前のメモにしたがって、Bloggerのウィジェットを編集する
具体的には次のようにウィジェットを書き直す。
なお、syntaxhighlighter4は自身で用意したGoogle Siteの識別子とする。

Brushの書き方は下記のURLに乗っている:

• https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Usage
• https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Brushes-and-Themes

以上で、SyntaxHighlighter V4.0.1のBlogger導入メモを終える。