【Blogger】Prism.jsを組み込んでコードをハイライト表示させる

Bloggerにはコードのハイライト表示機能が標準で備わっていないため、Prism.jsを組み込んでハイライト表示をさせていく。

他の選択肢としてはhighlight.jsなどがあるが、今回はなんとくPrism.jsを選択した。

Prism.jsの埋め込み

Bloggerのテンプレートに埋め込む必要があるためCDN経由で利用することになる。

Prism.js公式サイトの「Usage with CDNs」から各CDNのサイトに飛べる。

一応以下にリンクを貼っておく。

今回はcdn.jsを利用する。公式サイトに飛び最新バージョンを選択する。

※「9000.0.1」は誤って公開されたバージョンらしいので「9000.0.1」の１つ下のバージョンを選択する。

以下３つは最低限必要みたいなのでスクリプトタグをコピーしておく。

prism.min.css
prism.min.js
prism-autoloader.min.js

Bloggerのテーマからマイテーマの▼ボタンをクリックして、HTMLを編集を選ぶ。

テンプレートの編集画面からheadタグの下にprism.min.cssの読み込み設定を追加する。


 <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' ...>
    <head>
+      <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css' integrity='sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==' referrerpolicy='no-referrer' rel='stylesheet'/>

bodyタグの最後にprism.min.js、prism-autoloader.min.jsの読み込み設定を追加する。


    ・
    ・
    ・
+    <script crossorigin='anonymous' integrity='sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'/>
+    <script crossorigin='anonymous' integrity='sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==' referrerpolicy='no-referrer'src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'/>
  </body>

適当に記事を作成して動作を確認してみる。

良い感じに表示された。

プラグラインの設定

プラグインやテーマを追加しカスタマイズすることができる。

公式のテーマやプラグインは先ほどのCDNにアップされているのでPrism.jsの組み込みと同じ要領で追加してやれば良い。

今回は以下を追加してみた。

[テーマ]

VS Code Dark+：VS Codeライクの非公式テーマ

[プラグイン]

Normalize Whitespace：余分な空白を削除するプラグイン
Toolbar：ツールバーを表示するプラグイン（Copy to Clipboardプラグインに必要らしいので入れた）
Copy to Clipboard：コピーボタンを表示するプラグイン
Command Line：コマンドラインを実際のコマンドプロンプトっぽく表示するプラグイン
Diff Highlight：diff表示をハイライト表示してくれるプラグイン
Treeview：フォルダのツリー構造を綺麗に表示してくれるプラグイン

プラグインを追加後、確認すると以下のような感じになった。

テンプレートに追加した差分は以下となる。

headタグの下


 <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' ...>
  <head>
    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css' integrity='sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==' referrerpolicy='no-referrer' rel='stylesheet'/>
+   <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vsc-dark-plus.min.css' integrity='sha512-ML8rkwYTFNcblPFx+VLgFIT2boa6f8DDP6p6go4+FT0/mJ8DCbCgi6S0UdjtzB3hKCr1zhU+YVB0AHhIloZP8Q==' referrerpolicy='no-referrer' rel='stylesheet'/>
+   <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css' integrity='sha512-Dqf5696xtofgH089BgZJo2lSWTvev4GFo+gA2o4GullFY65rzQVQLQVlzLvYwTo0Bb2Gpb6IqwxYWtoMonfdhQ==' referrerpolicy='no-referrer' rel='stylesheet'/>
+   <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/command-line/prism-command-line.min.css' integrity='sha512-EgIkdlA87NL5dPmI6HztTCpg7XKfZRFQHbpEdDF3hCT45HjjmIJOx8K73r+YZha0vKyOcMpzC7fZ4RajCX25tg==' referrerpolicy='no-referrer' rel='stylesheet'/>
+   <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/diff-highlight/prism-diff-highlight.min.css' integrity='sha512-rErSjI34XKsATVf+BW6GnuWVmj7imdMR7AIyb4ydHhiMFewUiJOeN9bYO35iCgdG+3Bxkl0GkAs0E8hrDYooLA==' referrerpolicy='no-referrer' rel='stylesheet'/>

bodyタグの最後


    ・
    ・
    ・
    <script crossorigin='anonymous' integrity='sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'/>
    <script crossorigin='anonymous' integrity='sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==' referrerpolicy='no-referrer'src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'/>
+   <script crossorigin='anonymous' integrity='sha512-Kit4oPSAREacS6LEF4LGcL6MMlG3O1GqRFDGSX1Vg4JrozGU7hHoMKFkiMWevWq/xmNq8pzMhO2PcZCPHe/gmQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js'/>
+   <script crossorigin='anonymous' integrity='sha512-st608h+ZqzliahyzEpETxzU0f7z7a9acN6AFvYmHvpFhmcFuKT8a22TT5TpKpjDa3pt3Wv7Z3SdQBCBdDPhyWA==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'/>
+   <script crossorigin='anonymous' integrity='sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'/>
+   <script crossorigin='anonymous' integrity='sha512-6nsaJ4jytF/0bh+5QJY4SOLuZZmcd/TAXHBkLIX/SH1ENpWezpQDJ4LpK2D1IfpjKVyhJQQaNSSvfsQjuYfTow==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/command-line/prism-command-line.min.js'/>
+   <script crossorigin='anonymous' integrity='sha512-gNqZmXmzLWyg/00PDvTnX4q533JiXbxFdTWJC5hfOyHORHXOC6PtDP5Mm2Vpa4faIMONoKQADwhhbst9Ok1/oQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/diff-highlight/prism-diff-highlight.min.js'/>
+   <script>
+     Prism.plugins.NormalizeWhitespace.setDefaults({
+       'remove-trailing': true,
+       'remove-indent': true,
+       'left-trim': false,  // diff表示したい場合は左トリムはしない
+       'right-trim': true,
+       'remove-initial-line-feed': true,
+     });
+   </script>
  </body>

Bloggerでの使い方

記事投稿画面からHTMLビューにして以下のようにタグを追加することでPrism.jsを適用できる。

※HTMLタグに使われる文字（「<」など）はエスケープ処理して入力する必要がある。

入力例：

<pre><code class="language-html">
&lt;div&gt;Hello World&lt;/div&gt;
&lt;div&gt;こんにちは世界！！&lt;/div&gt;
</code></pre>

出力結果：

<div>Hello World!!</div>
<div>こんにちは世界！！</div>

classに設定されている「language-html」の「html」の部分を「js」など他の言語に変更することで他の言語用のハイライトに切替が可能。

対応している言語は公式サイト参照。

ちなみにDiff表示したい場合は、以下のように「language-diff-言語」と設定すれば良い。

Diff Highlightプラグインを導入している場合は追加で「diff-highligh」をクラスに指定してやると行の背景色が変わる。

※Diff表示を利用する場合、変更なし行は行の始めにスペースを入れる必要があるため注意が必要（スペースを入れないと削除行として扱われる）。