Crayon Syntax Highlighterからprismへの切り替え
Contents
Crayon Syntax Highlighter
このブログはWordPressで書いているのだがPythonのソースコードやshellコマンドの表示にはプラグインのCrayon Syntax Highlighterを使っている。
しかしこのプラグインは4年前から更新されておらずバージョンが2.8.4で止まってしまっている。
また先日PHPのバージョンを7.2から7.4に上げた際の正規表現の解釈の変更にCrayon Syntax Highlighterが対応しておらずページが表示されない等の問題が発生した。
結局crayon_langs.class.phpファイルを修正する事で対応をしたのだが今後のWordPressやPHPのバージョンアップへの追随を考えるとCrayon Syntax Highlighterを使い続けることはあまり良い選択肢とは言えないと思い、違う手法へ変更することにした。
環境
当方の現時点でのブログ環境は以下の通り。
Server | AWS(Amazon Web Services) EC2(Elastic Compute Cloud) |
OS | Ubuntu Server 18.04LTS |
PHP | PHP 7.4 |
CMS | WordPress Ver5.5 |
テーマ | Hueman Ver 3.6.1 |
プラグインかprismか
当初、違うプラグインへの乗り換えの前提で探していたのだがあまり良いプラグインが見つからなかった事とprism.jsが高速で良いとの記事も多かったのでprismに乗り換えることにした。
しかし簡単に乗り換えられると思っていたのだが若干ハマってハイライト表示がされなかったので備忘録の意味で記事にしておこうと思う。
同じような事をする人の参考になれば幸いです。
Prismのページ
最初にPrismのページで各種オプションを選択しながらJavascriptとCSSをダウンロードする。
圧縮レベルとテーマの選択
最初に圧縮レベル
- Development version(Javascriptが開発用で未圧縮)
- Minified version(圧縮済みのサイズの小さい本番用)
を選択する。
不具合のデバッグの為にJavascriptのソースコードを見る必要がある場合以外はMinified variosnで良い。
次にテーマを、
- DEFAUT
- DARK
- FUNKY
- OKADIA
- TWIILIGHT
- COY
- SOLARIZED LIGHT
- TOMORROW NIGHT
の中から選択する。
自分はTWILIGHTを選択したのだがThemesを選択して一番下までスクロールすると選択したテーマに応じたプレビューが表示されるので参考にできる。

言語の選択
次にコード表示に使用するLanguagesを選択する。
デフォルトで、
- Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS
- CSS
- C-like
- JavaScript
が選択されている。
沢山選択するとそれだけ容量が増えてページの読み込みに時間がかかるので必要最低限の選択にしたい。
自分は上記の他に、
- Bash+shell(コマンド類の表示用)
- C++
- JSON
- PHP
- Python
- SQL
を選択した。
尚、これは後から言語を追加してダウンロードしてする事もできる。

プラグインの選択
次に追加するプラグインを選択する。
これは以下の4つのプラグインを選択した。
- Line Number(行番号を表示する)
- Toolbar(上部にツールバーを表示する)
- Copy to Clipboard Button(コピーボタンを表示する)

ダウンロード
最後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンを押してjavascriptとCSSをダウンロードする。

JSとCSSの配置
ダウンロードしたJavascriptとCSSをサーバーに配置する。
前述したテーマの子テーマ用のディレクトリにjsとcssディレクトリを作成してそれぞれJavascriptとCSSを格納した。
[WordPressインストールディレクトリ]/wp-content/themes/hueman-child/js/prism.js
[WordPressインストールディレクトリ]/wp-content/themes/hueman-child/css/prism.css
hueman-childはテーマhuemanの子テーマのディレクトリ。
パーミッションは644を設定した。
sudo chmod 644 [ファイル名]
functions.phpの修正
親テーマのfunctions.phpを直接修正するとテーマのバージョンアップの際に修正内容が消えてしまうので子テーマのfunctions.phpに以下の2行を追加する。

下記の2行を加えてheaderでprism.jsとprism.cssを読み込むようにする。
自分は最初のstyle.cssを読み込む所に追記してしまったが別functionでadd_actionで追加しても良い。
wp_enqueue_style('prism-css', get_stylesheet_directory_uri() . '/css/prism.css',array('hueman-main-style'));
wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/js/prism.js');
wp_enqueue_styleの2つ目のパラメータのget_stylesheet_directory_uri()は子テーマのディレクトリ取得の際に使用する。
get_template_directory_uri()を指定している記事もあるが、こちらは親テーマのfunctions.phpに直接記述する際に使用する(親テーマの直接の編集はお勧めしない)
またcssを読み込む時にテーマによっては優先順位の関係でprism.cssが有効にならないケースが発生する(Huemanがそうだった)。
つまりprism.cssを読み込んだ後にhuemanのスタイルシートが読み込まれてprism.cssでの記述が上書きされてしまっていた。
cssは基本的に後から読み込んだ方が有効になるのでhuemanテーマのcssを読み込んだ後にprism.cssを読み込むようにwp_enqueue_styleの3つ目のパラメータでarray(‘hueman-main-style’)を指定している※。
※3つ目のパラメータでは先に読み込むCSSを指定できる
“hueman-main-style”の部分は自分のテーマのstyle名になるのだが調べる方法はChromeで記事ページを表示して右クリック、ページのソースを表示でHTMLのソースを表示する。
header部を追っていくとparent-style-css、child-style-cssに続いてhueman-main-style-cssを読み込んでいたので”hueman-main-style”(後ろの-cssは付けない)を指定した。

functions.phpに上記を追記してページのソースを表示した際に下記の様にheadでprism.cssとprism.jsが読み込まれていればOK。

追加CSS
プログラムのソースコード等の表示はそのままだと本文のフォントサイズと比較して大きめに感じたので追加CSSでフォントサイズと行の高さを低くすることにした。
prism.cssに直接手を加えると言語を追加して再度prism.cssをダウンロードした際にまた同じ修正をしなくてはならないのでテーマの追加CSSでフォントサイズの指定を行う。
WordPressのメニューから外観、カスタマイズ、詳細設定、追加CSSから以下のCSSを追記する。

/* Prism.css 変更分 */
code[class*="language-"],pre[class*="language-"]{
font-size: 0.85rem;
line-height: 1.2;
}
コードの書き方
記事でのコードの書き方は以下の通り。
<pre><code class=”lang-XXXX”>ここにコードを書く</code></pre>
XXXXの部分は言語を指定するのだが言語の一覧はこちらで確認して欲しい。
またlang-の部分はlanguage-xxxx (or lang-xxxx)とどちらでも良いように書いてあったがHuemanではlang-XXXXのみ有効だった。
languageはテーマで使用しているclass名と重なってしまっているのか、うまく動作しなかった。
これでちょっとハマった。
後、注意点としてはコード部分は>(大なり)や<(小なり)は記述できないので>や<等のHTML特殊文字で記述する必要がある。
Pythonのソースコードではビットのシフトで>>を使っているので注意したい。
移行方法
Crayon Syntax Highlighterを有効にした状態でHTML編集でコードを先に修正して一通り修正が終了後にcrayonを無効にしたいと思う。
それまでは前述の、
<pre><code class=”lang-XXXX”>ここにコードを書く</code></pre>
の記述をしてもcrayonプラグインが効くので表示はcrayonでのハイライト表示になる。

crayonを無効にするとprism.cssでハイライト表示される。

以上で今回の記事は終了とする。
この記事が何処かで誰かの役に立つことを願っている。
尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。
最近のコメント