【Cocoon】Highlighting Code Blockで行番号やハイライトなど上手く表示されない時の解決策

疑問くん

・Highlighting Code Blockで行番号が表示されない
・解決策って何かないの？

そんな疑問を解決します。

ずばり、CocoonでHighlighting Code Blockが上手く表示されない原因はCocoonデフォルトの「高速化」です。

Cocoonはデフォルトでjavascriptが縮小化されており、Highlighting Code Blockで必要なjavascriptが上手く読み込めません。

つまり、Cocoonに縮小化しないjavascriptを指定する必要があるということ！

その方法を以下で紹介します。

解決方法

WordPressの管理画面からCocoon設定にマウスカーソルを合わせると「高速化」という欄が表示されるのでクリックしましょう。

すると、上記の画像のような画面が表示されるので、JavaScript縮小化の欄に以下のコードをコピペ！

後は設定を保存すれば、正しく表示されます。

もしこれで正しく表示されない方がおられたらコメントください！

Highlighting Code Blockについて詳しく知りたい人は公式サイトをご覧ください。

Highlighting Code Block の使い方 | LOOS,Inc.

ブロックエディター・クラシックエディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。 クリック操作だけでコードブロックを簡単に挿入でき、選択した言語に合わせて

loos.co.jp