WordPress にプラグインをインストールせずに Prism でシンタックスハイライトする方法を記事にしました。Genesis Framework での設定にはなりますが、CSS と JavaScript を読み込ませるだけなので、ほかのテーマにも適用できるかと思います。
Prism の CSS と JavaScript を導入する
WordPress 管理画面にある Genesis メニューから「テーマの設定」をクリックします。その中にある「Header/Footer Scripts」をクリックし、ヘッダースクリプトに CSS を追記します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css">なお、CSS を切り替えることでテーマを選択することができます。切り替えられる CSS は下記の8つです。
- prism.css
- prism-coy.css
- prism-dark.css
- prism-funky.css
- prism-okaidia.css
- prism-solarizedlight.css
- prism-tomorrow.css
- prism-twilight.css
さらに、フッタースクリプトに JavaScript を追記します。
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>これで Prism の導入が完了しました。
コードブロックをクラス付きで使用する
記事の中でコードブロックを使用してシンタックスハイライトしたいコードを記述します。そして、コードブロック設定の「高度な設定」にある「追加 CSS クラス」に lang-name というクラスを指定します。ここで、name には言語名を指定してください。Prism の対応言語一覧があるので、name に埋める言語名の正確な表現はそちらを参照してください。例えば、HTML のコードをシンタックスハイライトしたい場合は、「追加 CSS クラス」に lang-html と指定します。
本稿では、WordPress にプラグインをインストールせずに Prism でシンタックスハイライトする方法を説明しました。環境を汚さないシンプルな方法としてオススメです。