Cocoonカスタマイズ まとめ記事公開中

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

ソフトウェア
疑問くん
疑問くん

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

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

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

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

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

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

スポンサーリンク

解決方法

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

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

prism.js

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

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

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

★無料でエンジニアに転職したい方★
東京(四ツ谷)に通える20代限定ですが、GEEKJOBは学習から転職までを無料で徹底サポート!

説明会と無料体験(1日)がありますので、「現状を変えたい方」や「エンジニア転職をしたい方」は是非、足を運んでみましょう!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
ソフトウェア
スポンサーリンク
Y&K Studio – 二人三脚ブログ –

コメント

タイトルとURLをコピーしました