ソースコードを記載しているWEBサイトではよく見かけると思いますが、コードなどを色分けしたりして見やすく表示させることを言うそうで。
当サイトを開設するにあたり技術ブログも書くつもりだったので、軽量で有名なPrism.jsをとりあえず採用。ホントに軽い。
準備する
CDN
CDNで読み込もうとすると、言語ごと読み込まないといけないためすんごい面倒っぽい。
読み込む量が大変なことになりそうなので割愛。
DLして使う
ダウンロードするとファイルがひとつにまとまるようなので、素直にダウンロードして使います。
ダウンロードは以下公式サイトより。
https://prismjs.com/download.html
サイトに読み込む
当サイトはWordPressを使用しているので、functions.phpへ下記を追加。
wp_enqueue_script( 'prism-js', get_theme_file_uri() . '*****/prism.js', array(), '1.0.1', true );
wp_enqueue_style( 'prism-css', get_theme_file_uri() . '*****/prism.css', array(), '1.0.1', true );
使う
ハイライトしたい部分を<pre class=”line-numbers”><code class=”language-言語名”> ~~~ </code></pre>で囲む。
※line-numbersはダウンロードする際にプラグインにチェックしておくと使用可能。
<pre class="line-numbers"><code class="language-html"> ~~~ </code></pre>