はじめに
今回は既存のテーマファイルを直接編集して対応しました。よって、テーマを更新した際には今回改造したコードが消えることになります。
通常はプラグインで対応するべきで、prism-highlight というプラグインもあるのですがうまく動作せず。自分でプラグインつくるのも時間がかかるので手っ取り早くテーマを直接編集してしまいます。
(1) Prism をダウンロード
https://prismjs.com/download.html にて Prism.js のテーマやハイライトに対応する言語を選択して、画面下部の DOWNLOAD JS と DOWNLOAD CSS から js/css ファイルをダウンロードします。
ダウンロードボタンの画像(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 部分に以下のコードを追加します。
twig
<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>
以上で完了です。おつかれさまでした。