WordPressにSyntaxHighlighter v4を設置する
遅まきながら、SyntaxHighlighterがバージョンアップしたことを知った。最後のコミットが2017/4/10なので、すでに1年以上経過している。
本稿ではSyntaxHighlighter Ver4.xのWordPressへの設置について説明したい。なお、SyntaxHighlighter Ver.3.x系をv3、Ver.4.x系をv4と呼ぶことにする。
- 準備事項
- SyntaxHighlighter v4の入手
- SyntaxHighlighter v4プロジェクトセットアップ
- v3 brushからv4 brushを作る。
- SyntaxHighlighter v4のビルド
- WordPressへの設置
-
準備事項
SyntaxHighlighter v4は、npmというものを用いて自分でビルドする必要がある。そのために必要なものは以下の通り。-
npm-v8.11.1のインストール
上記リンクを開き、8.11.1 LTSをダウンロード、インストールする。なお、2019.10.24時点の最新版では、LTSでもSyntaxHighlighter v4はビルドできない。必ず古いバージョンを用いること。 -
gitのインストール
上記リンクを開くと、右下にダウンロードリンクがあるので、ダウンロード、インストールする。
-
npm-v8.11.1のインストール
-
SyntaxHighlighter v4の入手
本家ではなく、karljacuncha氏のバージョンを用いる。(issue #428対策)$ git clone https://github.com/karljacuncha/syntaxhighlighter.git
-
SyntaxHighlighter v4プロジェクトセットアップ
-
インストール
$ cd syntaxhighlighter $ npm install
-
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
-
プロジェクトセットアップ
$ ./node_modules/gulp/bin/gulp.js setup-project
-
-
v3 brushからv4 brushを作る。
本家のMigration Guideによれば、v3 brushをそのまま取り込めるように書いてあるのだが、何かが足りず筆者はできなかった。そこでv3 brushからv4 brushを作ることにした。ここではjsonの例で説明する。-
repos
フォルダにある適当なv4 brushフォルダをrepos
フォルダ内にコピーしてフォルダ名を、brush-json
のように変更する。 -
コピーしたv4 brushフォルダにあるbrush.jsファイルとv3 brushファイル、例えばshBrushJson.jsを開き、v3 brushファイルのfunction Brush(){}の{}内をbrush.jsのfunction Brush(){}と差し替える。
-
function Brush(){}を差し替えたbrush.jsのBrush.aliasesを適切なものに変更する。
Brush.aliases = ['json'];
-
function Brush(){}を差し替えたbrush.jsでSyntaxHighlighter.regexLibをregexLibに置換する。
-
コピーしたv4 brushフォルダにあるpackage.jsonファイルを開き、nameを変更する。
"name": "brush-json"
-
コピーしたv4 brushフォルダにあるsample.txtファイルを開き、適当なjsonを記入する。
sample.txtの内容はビルド後にできるindex.htmlに反映される。確認目的のため、なくても構わないかも知れない。 -
できあがった
brush-json
フォルダのシンボリックリンクをnode_modules
に貼る。$ ln -s ~/Desktop/syntaxhighlighter/repos/brush-json/ ~/Desktop/syntaxhighlighter/node_modules/
-
-
SyntaxHighlighterのビルド
-
ビルド
v3系では後からテーマを変更できたが、v4系ではできない。この段階で採用すうるテーマを選ぶ必要がある。
テーマ名と見栄えの関係はこちらを参考にされたい。(筆者はEclipseを選んだ)$ ./node_modules/gulp/bin/gulp.js build --brushes='all' --theme=Eclipse
-
syntaxhighlighter.jsの編集
以上で、distフォルダにsyntaxhighlighter.jsとtheme.cssができあがる。syntaxhighlighter.jsファイルを開き、最後尾の
//# sourceMappingURL=syntaxhighlighter.js.map
を削除する。
-
-
WordPressへの設置
-
FTPアップロード
distフォルダにあるsyntaxhighlighter.jsとtheme.cssを適当なフォルダに入れて(筆者はsyntaxhighlighter_v4とした)FTPクライアントソフトでアップロードする。(筆者の場合、WordPressのトップレベルwpフォルダと同じ階層に置いた) -
子テーマの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'); ?>
-
子テーマのfunctions.phpのFTPアップロード
上記で作成したfunctions.phpをFTPクライアントソフトでアップロードする。
-
以上
参考サイト
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント