[無料WordPressテーマ] LuxeritasでシンタックスハイライターPrism.jsを使おう！
エントリーの中でソースコードを掲載するならシンタックスハイライト機能は欲しいところです。当サイトでもその機能が利用したくてなるべく希望に近いプラグインを探してみましたが、どうにもしっくり来るのが見つからなかったので、最終的にPrism.jsを導入する事にしました。
本当はプラグインが欲しかった
WordPressには有名なプラグインCrayon Syntax Highlighterがあります…が、動作が重い事でも有名なので出来ればそれだけは避けたいという事で却下しました。
私が求めるシンタックスハイライターの条件としては
- 軽い、とにかく軽いの
- ショートコードを使わない
- preタグとcodeタグで実装
- 一行おきに背景の色が変えられる
このくらいならそれほど難しい注文でも無いだろうと思ってたんですが、なかなかこの条件に合致するプラグインは見つかりませんでした。
そこで例によってLuxeritasの作者さんも良いと言っていたPrism.jsを導入する事にしたんですが、これがマジで良かったのでこの機会に取り上げてみる事にしました。
Prism.jsのダウンロードと使用方法
今から約3年前の記事になりますが内容的には今でもそのまま通用しますので、こちらを参考にしていただければと思います。と言うかなんか毎度すいません、ホントすいません…
https://thk.kanzae.net/net/wordpress/t1171/実際こちらに書いてある方法にならって当サイトでも利用していますが、問題なく動作しているので使い方は現行と変わってないものと思われます。
ただ、言語の表示に関してはdata-languageをつけなくても表示されちゃってるような…と思ったらそこに設定したまんま表示されるって事なのかな？ここはちとよくわかりません。
Luxeritasならではの方法でインストール
作者さんの記事に丸投げするだけではさすがに申し訳無いので、Luxeritasの機能を活かしたインストール方法を紹介してみたいと思います。と言うかこれインストールって言うんかいな…
prism.jsの読み込み
まずprism.jsをLuxeritas子テーマのディレクトリ（自分で変更してなければluxech）にアップロードします。読み込みに関してはLuxeritasの圧縮・結合機能に便乗させてもらう事にしましょう。元々prism.jsはサイズが小さいので圧縮の効果は微々たるものだと思いますが、読み込みの手間が省けますしその方が簡単なのでオススメです。
ダッシュボードからLuxeritasのカスタマイザーを開いて、圧縮・最適化タブの一番下にある「▼Javascript の最適化」にあるプルダウンメニューから「圧縮する（追加ファイルも結合して圧縮できます）」を選択します。
次に「追加して圧縮・結合する Javascript ファイル名」にprismとだけ入力します。すぐ上の注意書きにもあるように拡張子は不要、と言うかつけちゃダメです。
こんな感じになっていればOKです。
次にJavascriptのタブを開いて、こちらも一番下の「▼その他のJavascript設定」にある「子テーマの Javascript（luxech.js）を読み込まない」のチェックボックスにチェックが入っていない事を確認します。
ここにチェックが入ってるとせっかく圧縮・結合したjsを読み込んでくれないので注意して下さいね？
prism.cssの読み込み
CSSはJSのように自分で追加した分を圧縮・結合してくれる設定は無かったと思うので、子テーマのstyle.cssの最後にでも中身をまるっとコピペしておくのがいいんじゃないかと思います。と言うか私はそうしました。
本当に簡単です
こんなに簡単にインストール出来るんだったらプラグインに拘る事も無かったな…とそう思いましたよ、いやマジで。
ちなみに当サイトではCSSで見た目を結構イジってますが、ダウンロードしてきたCSSを直接修正してしまったのでどこをどう変えたかはちょっと覚えてません…というわけでカスタマイズ内容についてはゴメンナサイです。
あと一応書いておきますと、AMPページではJavascriptが使えないので当然この機能も働きません。ゆえに普通にpreタグかcodeタグの装飾のみになりますので、念の為。