「レンダリングを妨げるリソースの除外」に「crayon-syntax-highlighter」問題解決が「prism」乗換しかないので方法を紹介

Google社が提供するサイト計測「PageSpeed Insights」で、「改善できる項目」の「レンダリングを妨げるリソースの除外」の中に、「highlight.js」の css が表示されるようになった。

この表示を回避する方法はあるが、プラグインが4年前から更新されておらずバージョンが2.8.4で止まってしまっている。

作成者が更新を辞めたという話もあるし、PHPのバージョンを7.4に上げた際の正規表現の解釈の変更によって正しく表示されない（非対応）ようになった。

可決策として別のモノに変更する事にした。セキュリティーを考えてもその方が良さそうだ。

ブログ環境

環境によって同じ動作になるか不明だから、当方のブログ環境は以下の通りだ。

prism

プラグインが簡単で良かったけど「prism」は、サイトからダウンロードする必要がある。

ダウンロード

prismjsのダウンロードページからダウンロードする。

圧縮レベルとテーマの選択

圧縮レベルは２つあり、「Development version」と「Minified version」があるが、通常は「Minified version」でよい。
テーマが複数用意してあるので、好きなテーマを選択してページ最下部にプレビュー表示されるので確認をして下さい。

言語の選択

デフォルトで複数の言語が選択済みなので、必要な言語を追加で選択して下さい。

プラグインの選択

各種表示画面について、カスタマイズが用意されているので、必要なプラグインを選択して下さい。

ダウンロード

JSとCSSをそれぞれダウンロードする。

ファイルの設置場所

私は、「Luxeritas」テーマの子テーマを使っているので、[WINSCP]などを使って、子テーマ用のルートディレクトリにそれぞれJavascriptとCSSを格納する。

Head タグに追加

functions.phpに以下の２行を追加する。

「Luxeritas」テーマの場合

<link rel="stylesheet" href="https://XXXXX/wp-content/themes/Luxeritas/css/prism.css">
<script src="https://XXXXX/wp-content/themes/Luxeritas/js/prism.js"></script>

スタイルシートに追加

スタイルシート : style.cssに以下のコードを追加する。

code[class*="language-"],pre[class*="language-"]{
  font-size: 0.85rem;
  line-height: 1.2;
}

コードの書き方

基本コード

ワードプレスの記事作成画面の「テキスト」タブに以下の文字列を追加する。

”ここにコードを書く”部分に必要なコードを記入する。

行番号を表示させる

このコードだと行番号が表示されないので以下のコードにする。

言語名を指定する

「class=”language-言語名”」を記述して、ソースコードの言語名を入力する必要があります。

AddQuictag

コードを書くときに毎回上記の分を書くのは、不便だから下記プラグインを使う。

WordPressプラグイン「AddQuictag」で毎回手打ちする必要を省けます。

以上で終わりです。

お疲れ様でした！