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. ビルド
      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クライアントソフトでアップロードする。

以上

参考サイト

この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL