遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。

なんか見た目にカラフルでいいですよね。

1. cocoonでコードがハイライトしない

ところが何故かうまく表示されません。

まずは、表示されたコードブロックを見てみてください。

このように、コードブロックがあるのにjavascriptの色分けがされていません。

1-1. まずはHTMLを検証してクラスを確認する

検証でHTMLを見てみると、ちゃんとjavascriptのクラスは指定できています。

1-2. Cocoonの「ソースコード設定」でハイライト表示をオンにしている？

CocoonではjQueryプラグインのhighlight.jsを利用する、コードハイライト機能があります。設定で簡単にオンにできます。

ソースコードをハイライト表示させる方法

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

wp-cocoon.com

2. JavaScriptの非同期処理をするプラグインがある？

Cocoonのソースコードのハイライトに調べてみるとほとんどが設定の仕方の話ですが、「ハイライト系は非同期にするとうまく動かないことがある」という記事を発見しました¹。

非同期といえば、高速化処理を使っているから怪しい。

2-1. LiteSpeed CacheのJavascriptの遅延読込を無効にする

調べてみると、「LiteSpeed Cache」プラグインの中に、Javascriptの遅延読込があります。

まずとは、LiteSpeed Cache の「ページの最適化」設定から、「[2] JS設定」を表示します。

その中に「インラインJSの読み込み」という項目があります。

これを「オン」から「DOM の準備が整った後」に変更してみます。

すると、ちゃんとコードハイライトがされました。

リンクを表示するとスタンプが押されるCSSアニメーション

今回は「押すのが心地よいリンク」というのを考えてみました。それが、画面に表示すると、スタンプが押されるアニメーションです。枠の中にマウスをポイントしてみてください。 どうでしょうか？　押したくなります？HTMLコードポイントは、my-stampとstamp2というクラスです。my-stampが枠全体、stamp2が中のイラストを指しています。<figure class="wp-block-image size-large is-resized my-stamp"> 読んだよ ...

chiilabo.com

3. highlight.jsの動作のしくみとJavaScriptの遅延読み込み

どういう原理かというと。

シンタックスハイライトのライブラリ「highlight.js」では、画面を表示する時にコードの中身を読み込んで、構文要素ごとに<span>タグを挿入します。

これが、表示されるHTMLのソースです。

<span class=”hljs-*”>タグが埋め込まれているのがわかりますよね。

ところが、高速化のためにJavaScriptの読込を待たずに処理を進めていく、遅延読込を有効にしていると、「highlight.js」のスクリプトが完全に読み込まれる前に処理が実行されてしまうので、正しくパースされません。

確かに「LiteSpeed Cache」の「インラインJSの読み込み」の注意書きにちゃんと書いてあります。

DOM が完全に読み込まれた後にインライン JS を読み込むと、JS の互換性が向上し、他の JS 最適化機能が有効になっている場合の JS エラーを減らすことができます。

DOMは「Document Object Model (DOM) 」、ウェブ上の文章と構造をオブジェクトとして表現したデータ形式です。今回は形式の話はよいのですが、要は全てのデータを読み込んでからスクリプトを実行しないと、エラーになることがあるということです。

インラインスクリプト（自分のサイトのスクリプト）が、外部スクリプトがまだ読込中なのに呼び出そうとしてしまうからです。

3-1. 今度はアイコンフォントが表示されない

ところが、よくページを見てみると、今度はアイコンフォントが表示されていません。

いろいろやってみて、JS結合を「オフ」にして、「遅延」に戻すことで解決しました。

高速化のためにはスクリプトを結合したほうが速いのですが、アイコンフォントの置き換えなど実行順序がおかしくなっているようです。

今日（2020年9月24日時点）のサイトスピード：61点

問題なさそうです。

その後の話。

[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】

なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。highlight.jsが動作しないCocoonテーマには、ソースコード ハイライト機能があります。これは、highlight.jsを利用しています。しかし、Cocoon設定では、ちゃんとハイライト表示にチェックがつけたのですが、記事内のソースコードがそのままでした。これまで うまくコードハイライトが表示されない原因は、「スクリプトの遅延処理などのほかのプラ...

chiilabo.com

こちらもどうぞ

[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。

chiilabo.com

「にほんブログ村」をはじめた理由

「にほんブログ村」というサイトをご存知ですか？にほんブログ村は、ブログのランキング・交流サイトです。（参考）にほんブログ村ちいラボも登録してみたので、その理由を整理しておこうと思います。登録サービスの利用これまでは、ちいラボでは登録サービスをあまり使って来なかった気がします。振り返ってみると、何があるかな……ジモティーに登録したらSNS以外では、ジモティーぐらいかもしれません。ジモティーは、一番はじめに教室の内装を安く手に入らないかな、という下心で登録したんですが、結局取りに...

chiilabo.com

1. https://taishon.nagoya/cocoon-highlight/#toc2

QRコードを読み込むと、関連記事を確認できます。