[Blogger/Vaster] highlight.jsの導入でちょっとつまずきました

コピペでOK？

検索をして参考サイトを見ると、公式サイトのコードをコピペすれば動くとするところが多いようです。

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

[レイアウト]-[ガジェット]からHTML/JavaScriptガジェットに上記コードをコピペすれば動きますが、直接HTMLに書くときは下記のように1行目の.css” のあとに/スラッシュを追加しないとエラーがでてしまいました。

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

PageSpeed Insightsに怒られたので </body>の直上に記述しました。

スタイルを選ぶ

こちらのデモページからスタイルを選べます。

好みのスタイルの名前をdefaultから書き換えます。

例：Agateの場合

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>

デモページに書いてあるスタイルの名前は大文字から始まりますが、すべてアルファベットの小文字でないと動きません。

• 公式サイト https://highlightjs.org/
• コード（1~2行目のコピペ用）https://highlightjs.org/download/
• デモページ https://highlightjs.org/static/demo/
• 使い方など（3行目のコピペ用） https://highlightjs.org/usage/

CSS

https://github.com/isagalaev/highlight.js/tree/master/src/styles