WEB MEMO

ソースコードを綺麗に表示するhighlight.jsの簡単設置方法

KOSAERU WEB MEMO
ソースコードを綺麗に表示するhighlight.jsの簡単設置方法

▼フッターに以下のコードを書く

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/hybrid.min.css">
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>

▼表示方法
ハイライトさせたいソースコードを以下のタグで囲む。
<pre><code>ソースコード</code></pre>

▼Highlight.jsの公式サイト
https://highlightjs.org/

▼Highlight.jsのカラーテーマのデモページ
https://highlightjs.org/static/demo/

▼Highlight.jsのCDN一覧
読み込むＣＳＳを変更することで見た目をサラっと変えられる
https://cdnjs.com/libraries/highlight.js/

WEB MEMO