SyntaxHighlighter

2018/10/22

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
    3. -- 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;
      
        
    4. 続けて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内でのテストを行う
  3. 最後にBloggerに指定する。
    1. 以前のメモにしたがって、Bloggerのウィジェットを編集する
    2. 具体的には次のようにウィジェットを書き直す。
      
      
      なお、syntaxhighlighter4は自身で用意したGoogle Siteの識別子とする。

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

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

0 件のコメント:

コメントを投稿