codoc│有料記事コンテンツ内でHighlighting Code Blockを表示する方法

WordPressでコード表示を美しく行う「Highlight Code Block（HCB）」と、記事販売サービス「Codoc（コードク）」を併用していると、以下のような問題が起こることがあります。

• Codoc経由で表示される記事で、コードブロックがハイライトされない
• コピー用のボタンが表示されない

この記事では、それらの問題を解消するための「後から読み込まれるHCBブロックに対して、Prism.jsとClipboard.jsを強制適用する」ためのコードをご紹介します。

JSのタイミングがキモです。
codoc内で似たようが現象が発生している場合に参考になると思います。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

codocの有料記事コンテンツ内でHighlighting Code Blockを表示する方法

CodocなどのJavaScriptで後から読み込まれるコンテンツにも、PrismのシンタックスハイライトとClipboardボタンを確実に適用します。

以下のコードを、functions.phpに追記してください。

エラーが怖い人はCode Snippetsのプラグインを入れて、そこからコードを挿入しましょう。