WordPressにSyntaxHighlighter v4を設置する

遅まきながら、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.regexLibregexLibに置換する。

    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. ビルド

                          $ ./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オプションがそのまま使える。

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

以上

参考サイト

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL