Prism.jsを導入することで、コードをシンタックスハイライト表示にすることができる。
つまり、これを↓
↓こう表示することができる。とてもきれいで見やすい。
前提条件
- Laravel10へPrism.jsを導入
- LaravelのフロントはVite + blade（たぶんVite使ってなくてもできそう）
- Prism.jsはCDNを使う
CDNを設定してPrism.jsを使えるようにする
https://cdnjs.com/libraries/prism ←このページからCDNのタグをコピーしてきて、bladeのheadタグ内に記載する。2番目のlinkタグでテーマを指定する形になっていて、使用したいテーマに合わせて、先ほどのページから選択してくる。ちなみに下記の場合は、「okaidia」というテーマ。
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-okaidia.min.css">memo
上記1行目のscriptはPrism.jsを使うために必要なスクリプト。
cdnjsのサイトにあるprism.min.jsのURLだとなぜか読み込みできなかったので、上記のURLを使用。
blade側の記載
下記のようにcodeタグで囲んだ部分がシンタックスハイライト表示になる。使用するコードの言語はcodeタグのclassで指定する。例えばphpを使う場合であれば、「language-php」となる。使える言語の一覧はPrism.jsのページのSupported languagesにのっている。
<pre>
<code class="language-xxxx">
コードの中身
</code>
</pre>プラグインを使う場合はCDNを追加
はじめに設定したCDNに加えて、プラグイン用のCDNを追加する。使えるプラグインの一覧はPrism.jsのページにあり、CDNは先程とおなじcdnjsのページにある。例えば下記は、言語の種類をシンタックスハイライトの中に記載するプラグイン。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/plugins/show-language/prism-show-language.min.css" integrity="sha512-09fmad4VA38AJxIRtkrW3DmKI2PsTsEpx3bfR8ZmkQunfQ9jORIieKVREv6fVLmqdnrFbPkCO5PKTnBIIvswBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/plugins/show-language/prism-show-language.min.js" integrity="sha512-WZeiH/5UJ3HZsxGBbWWIBluPrC/PIHbs/x1GtCP7lky8XbHXEzYfI9PJkL0d7/LdL7DvzHFScNkic8PaNhh+qg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>設定すると右上に言語が表示されるようになる↓
