コードを表示できるようにする

2023-10-06

このサイトには最低限の機能しか持たせたくないのですが、コードの表示はできないと困るのでやり方を調べました。

このサイトは markedjs を使用して markdown から html を生成しているのですが、コードブロックは html に変換した時に以下のようになります。

<pre>
  <code class="language-html">
    // コードブロックの内容
  </code>
</pre>

これを良い感じに表示させるためのライブラリとして、hilight.js や prisma.js などがあります。
今回は prisma.js のCDN版を使用して対応しました。cssとjsファイルへのリンクを追加するだけなので楽ちん。
cssはテーマが複数あるので好みで入れると良さそうでした。