std9.jp
Grav · · by hikaru

GRAV で Prism.js を使ったコードハイライトの組み込み方法

Grav1.7.18Grav Coder0.1.8
目次 (4)
  1. はじめに
  2. (1) Prism をダウンロード
  3. (2) Prism の保存先
  4. (3) Prism の読み込み処理

はじめに

今回は既存のテーマファイルを直接編集して対応しました。よって、テーマを更新した際には今回改造したコードが消えることになります。 通常はプラグインで対応するべきで、prism-highlight というプラグインもあるのですがうまく動作せず。自分でプラグインつくるのも時間がかかるので手っ取り早くテーマを直接編集してしまいます。

(1) Prism をダウンロード

https://prismjs.com/download.html にて Prism.js のテーマやハイライトに対応する言語を選択して、画面下部の DOWNLOAD JS と DOWNLOAD CSS から js/css ファイルをダウンロードします。

ダウンロードボタンの画像

:::message default 余談 このダウンロードボタンが AD 広告っぽくて躊躇しましたがこのボタンで問題ありません～ :::

(2) Prism の保存先

ダウンロードした prism.js と prism.css をテーマフォルダに保存します。私は Grav Coder テーマを使用しているので user/themes/grav-coder/libs/prism/ フォルダ内に js/css ファイルを保存しました。

(3) Prism の読み込み処理

Grav Coder テーマを使用している場合は、user/themes/grav-coder/templates/partials/base.html.twig ファイルの head 部分に以下のコードを追加します。

<head>
  <!-- …省略… -->

  <!-- Prism.js を読み込む -->
  <link href="{{ url('theme://libs/prism/prism.css?v=1') }}" rel="stylesheet" />
  <script src="{{ url('theme://libs/prism/prism.js?v=1') }}"></script>
</head>

以上で完了です。おつかれさまでした。