・おすすめの方法は、「highlight.js」を使う方法。
・これを使うと、pre-codeタグで囲った内容がハイライトされる。
・しかも、cdn経由で一瞬で導入可能。
使い方
・以下のコードを追加するだけでOK。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
デザイン変更方法
・好みのデザインは以下のサイトから選択し、cssファイル名に適用すればOK。
・ただし、スペースは-に置き換え、大文字は小文字に置き換える必要有。
https://highlightjs.org/static/demo/
・このサイトでは「agate」を使用しているため、「agate.min.css」と記載している。