土田 拓也

テクノロジやビジネス、デザイン、ライフスタイルについて思惟するシステムエンジニア

  • About
  • Blog
    • Technology
    • Business
    • Design
    • Lifestyle
  • Contact
  • Github
  • LinkedIn
  • RSS
  • Twitter
© 2023 Takuya Tsuchida

WordPress にプラグインをインストールせずに Prism でシンタックスハイライトする

2020年8月22日

WordPress にプラグインをインストールせずに Prism でシンタックスハイライトする方法を記事にしました。Genesis Framework での設定にはなりますが、CSS と JavaScript を読み込ませるだけなので、ほかのテーマにも適用できるかと思います。

Prism の CSS と JavaScript を導入する

WordPress 管理画面にある Genesis メニューから「テーマの設定」をクリックします。その中にある「Header/Footer Scripts」をクリックし、ヘッダースクリプトに CSS を追記します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>

これで Prism の導入が完了しました。

コードブロックをクラス付きで使用する

記事の中でコードブロックを使用してシンタックスハイライトしたいコードを記述します。そして、コードブロック設定の「高度な設定」にある「追加 CSS クラス」に lang-name というクラスを指定します。ここで、name には言語名を指定してください。Prism の対応言語一覧があるので、name に埋める言語名の正確な表現はそちらを参照してください。例えば、HTML のコードをシンタックスハイライトしたい場合は、「追加 CSS クラス」に lang-html と指定します。


本稿では、WordPress にプラグインをインストールせずに Prism でシンタックスハイライトする方法を説明しました。環境を汚さないシンプルな方法としてオススメです。

カテゴリ:テクノロジ タグ:Genesis Framework, Prism, WordPress