画像やリンクが無効になっている可能性もあるのでご了承下さい。
はじめに
2017/04 に Syntax Highlighter として Prism.js を使用するようになった。
コアの JavaScript 自体は常に更新されてはいるものの、ここ 1 年くらいはまともに手を入れてなかったなってことでちょっといじってみた。
Prism.js をダウンロードし直す
上記オフィシャルサイトより自分がハイライトしたいと思う対象を選びつつ、使用したいプラグインにもチェックを入れて JavaScript と CSS を共にダウンロード。
2 つのファイルを FTP なりなんなりでホストの任意のパスに転送しておく。
WordPress で Prism.js を読み込ませる
今回筆者は次のパスに Prism.js を設置した。
要はドキュメントルート直下に lib を掘ってその下に色々スクリプトをまとめて行く方向性ということで。
~/public_html/lib/prism/prism.js
~/public_html/lib/prism/prism.cssあとは使用しているテーマの functions.php に次のスクリプトを追記する。
/* Prism.js */
function add_prismjs() {
if ( is_single() || is_page() ) {
$prism_ver = '1.15.0';
wp_enqueue_style( 'prism-css', home_url() . '/lib/prism/prism.css', array(), $prism_ver );
wp_enqueue_script( 'prism-js', home_url() . '/lib/prism/prism.js', array('jquery'), $prism_ver, true );
}
}
add_action( 'wp_enqueue_scripts', 'add_prismjs' );
このスクリプトの概要としては 2 行目で Prism.js をロードする関数を適当な名前 add_prismjs() として記述し、9 行目で wp_enqueue_scripts という WordPress の関数にフックする形で Prism.js をロードする為の関数を追加する。
add_prismjs() 内では設置してある Prism.js 関連ファイルを実際に読み込む事となるが、トップページで Syntax Highlight は使わないので無駄な転送量を減らす為に固定ページと投稿ページでのみ Prism.js をロードするように手を加えてみた。それが 3 行目の if 文となる。条件は「投稿ページ若しくは固定ページであった場合」。
4 行目で $prism_ver と変数定義を行っているが、続く 5～6 行目の関数へ引数としてバージョン情報を与える形式をとっている。バージョンが更新されたらこの値も変更してあげるとブラウザキャッシュ絡みのトラブルも防止出来る。
5～6 行目の wp_enqueue_style と wp_enqueue_script は WordPress で用意された関数であり、JavaScript や CSS を読み込ませるとき、テーマファイル内に直接記述するよりもこちらにフックして読み込ませた方が柔軟に対応してくれる。
出力されるコード
今までの作業で設置と動作設定は完了した。
実際にソースへ出力されるコードは次の通り。
<script src='https://bucci.bp7.org/lib/prism/prism.js?ver=1.15.0&fver=20190317061128'>
<link rel='stylesheet' id='prism-css-css' href='https://bucci.bp7.org/lib/prism/prism.css?ver=1.15.0&fver=20190318035434' media='all'/> 個人的には正直 JavaScript や CSS に引数を付けるという事はなんかしっくり来ないので好みではないが、ブラウザキャッシュ絡みで問題を起こすのもあれだし渋々という形で消さずに付けておくようにしている。
とはいえ当ブログでは使用しているテーマ Cocoon により JavaScript と CSS の最適化が行える為、実際には上記コードが出力されずトップページのソースに統合されているからさほど問題にはならないのかなと。
おわりに
久々に Prism.js 周りを触ってみたけどスクリプトのダウンロード方法がちょっと面倒な所と、Windows 上でやると文字コード絡みでちょーっとトラブる可能性がある点を除けば扱いやすくて良い Syntax Highlighter かなと思う。
コメント