2016.02.18

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

KOSAERU ｜ WEB MEMO ｜ Javascript

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

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

1

2

3

<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/

RELATED POSTS