遅まきながら、SyntaxHighlighterがバージョンアップしたことを知った。最後のコミットが2017/4/10なので、すでに1年以上経過している。

本稿ではSyntaxHighlighter Ver4.xのWordPressへの設置について説明したい。なお、SyntaxHighlighter Ver.3.x系をv3、Ver.4.x系をv4と呼ぶことにする。

1. 準備事項
2. SyntaxHighlighter v4の入手
3. SyntaxHighlighter v4プロジェクトセットアップ
4. v3 brushからv4 brushを作る。
5. SyntaxHighlighter v4のビルド
6. WordPressへの設置

1. 準備事項
   SyntaxHighlighter v4は、npmというものを用いて自分でビルドする必要がある。そのために必要なものは以下の通り。

   • npm-v8.11.1のインストール
     上記リンクを開き、8.11.1 LTSをダウンロード、インストールする。なお、2019.10.24時点の最新版では、LTSでもSyntaxHighlighter v4はビルドできない。必ず古いバージョンを用いること。
   • gitのインストール
     上記リンクを開くと、右下にダウンロードリンクがあるので、ダウンロード、インストールする。

2. SyntaxHighlighter v4の入手
   本家ではなく、karljacuncha氏のバージョンを用いる。（issue #428対策）

   $ git clone https://github.com/karljacuncha/syntaxhighlighter.git

3. SyntaxHighlighter v4プロジェクトセットアップ

   1. インストール

      $ cd syntaxhighlighter
      $ npm install

   2. gulpのダウングレード（3.9.1 -> 3.9.0）
      Failed to load external module @babel/register対策

      $ sudo npm uninstall -g gulp
      $ sudo npm install -g gulp@3.9.0
      $ npm uninstall --save-dev gulp
      $ npm install --save-dev gulp@3.9.0

   3. プロジェクトセットアップ

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

4. v3 brushからv4 brushを作る。
   本家のMigration Guideによれば、v3 brushをそのまま取り込めるように書いてあるのだが、何かが足りず筆者はできなかった。そこでv3 brushからv4 brushを作ることにした。ここではjsonの例で説明する。

   1. reposフォルダにある適当なv4 brushフォルダをreposフォルダ内にコピーしてフォルダ名を、brush-jsonのように変更する。

   2. コピーしたv4 brushフォルダにあるbrush.jsファイルとv3 brushファイル、例えばshBrushJson.jsを開き、v3 brushファイルのfunction Brush(){}の{}内をbrush.jsのfunction Brush(){}と差し替える。

   3. function Brush(){}を差し替えたbrush.jsのBrush.aliasesを適切なものに変更する。

      Brush.aliases = ['json'];

   4. function Brush(){}を差し替えたbrush.jsでSyntaxHighlighter.regexLibをregexLibに置換する。

   5. コピーしたv4 brushフォルダにあるpackage.jsonファイルを開き、nameを変更する。

      "name": "brush-json"

   6. コピーしたv4 brushフォルダにあるsample.txtファイルを開き、適当なjsonを記入する。
      sample.txtの内容はビルド後にできるindex.htmlに反映される。確認目的のため、なくても構わないかも知れない。

   7. できあがったbrush-jsonフォルダのシンボリックリンクをnode_modulesに貼る。

      $ ln -s ~/Desktop/syntaxhighlighter/repos/brush-json/ ~/Desktop/syntaxhighlighter/node_modules/

5. SyntaxHighlighterのビルド

   1. ビルド
      v3系では後からテーマを変更できたが、v4系ではできない。この段階で採用すうるテーマを選ぶ必要がある。
      テーマ名と見栄えの関係はこちらを参考にされたい。（筆者はEclipseを選んだ）

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

   2. syntaxhighlighter.jsの編集
      以上で、distフォルダにsyntaxhighlighter.jsとtheme.cssができあがる。

      syntaxhighlighter.jsファイルを開き、最後尾の//# sourceMappingURL=syntaxhighlighter.js.mapを削除する。

6. WordPressへの設置

   1. FTPアップロード
      distフォルダにあるsyntaxhighlighter.jsとtheme.cssを適当なフォルダに入れて（筆者はsyntaxhighlighter_v4とした）FTPクライアントソフトでアップロードする。（筆者の場合、WordPressのトップレベルwpフォルダと同じ階層に置いた）

   2. 子テーマのfunctions.php編集
      以下のように、設置したパスに合わせてfunctions.phpを編集する。なお、function shOptionsCSS() {}は、v3の時のcssオプションがそのまま使える。

      <?php
      
      /**
       * Added by Tougen-Roushi.
       */
      
      /**
       * SyntaxHighlighter CSS
       */
      function shThemeCSS() {
          wp_enqueue_style('shThemeCSS', '../../../../syntaxhighlighter_v4/theme.css');
      }
      add_action('wp_enqueue_scripts', 'shThemeCSS');
      
      function shOptionsCSS() {
          wp_enqueue_style('shOptionsCSS', '../../../../syntaxhighlighter_v4/options.css');
      }
      add_action('wp_enqueue_scripts', 'shOptionsCSS');
      
      /**
       * SyntaxHighlighter JavaScript
       */
      function shCoreScpt() {
          wp_enqueue_script('shCoreScpt', '../../../../syntaxhighlighter_v4/syntaxhighlighter.js');
      }
      add_action('wp_enqueue_scripts', 'shCoreScpt');
      
      ?>

   3. 子テーマのfunctions.phpのFTPアップロード
      上記で作成したfunctions.phpをFTPクライアントソフトでアップロードする。

以上

参考サイト

• linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する
• SyntaxHighlighter v4をWindows10でビルドする方法 ～本番編～
• WordPressにSyntaxHighlighterを設置する