Prism.js をWordPressで使う

問題

WordPressでPrism.jsを使いたいです。

答え

プラグインなど使用しない場合。

Prism.jsのJavaScriptとスタイルシートを取得

公式サイトからダウンロードする。

https://prismjs.com/download

テーマ、対応したい言語を選択して、JavaScriptとスタイルシートをダウンロードする。

Prism.jsのJavaScriptとスタイルシートを読み込む

テーマ、プラグインのディレクトリ、もしくは適当な場所にアップロードする。

WordPressのほうは、ヘッダに prism.css を読み込むlinkタグと、prism.js を読み込むscriptタグを追加する。

自作のテーマなどだと気軽に追記できると思うが、テーマを直接変更しづらい場合は、子テーマを作ったり、 wp_head フックなどで追記する。

「コード」ブロックを使って、記事を書く

WordPressで「コード」のブロックを作ると、

以下のようなHTMLとなります。

<pre class="wp-block-preformatted"><code>
  内容
  内容
</code></pre>

このブロックに「高度な設定」の追加CSSクラスで、Prism.js向けに language-javascript など指定すると、

HTMLは以下のようになります。

<pre class="wp-block-preformatted language-javascript"><code>
  内容
  内容
</code></pre>

以上でOK。

使用例（デモ）

↓ こちらは 「コード」ブロックで、language-php を指定したもの。

<?php
echo date('Y-m-d H:i:s');

ちゃんとシンタックスハイライトされて表示される。