【blogger】シンタックスハイライトはprism.jsで

今話題のprism.jsをブロガーに実装するやりかた。

CDNを使います。
こちらのサイトからもって来ました。
https://cdnjs.com/libraries/prism

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.css' rel='stylesheet'/>

の3行を</head>のすぐ上へ

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.js'/>

の3行を</body>のすぐ上へ

それぞれ、2行目と3行目はプラグイン部分なので、行番号表示と特定行ハイライトが必要なければなくてOK。

記事中は

<pre class="line-numbers" data-line="4,9-10"><code class="language-markup">内容
</code></pre>

のように、<pre><code></code></pre>で囲みます。
line-numbersは行番号表示、data-lineはハイライトを指定します。
language-markupのmarkupの部分が言語指定です。

ちなみに、上記のコードもprism.jsで表示しています。
きれいに表示出来て気に入っているのだ。