記事内で、ソースコードを掲載することがあるため、Webページ上のプログラムのソースコードを色分けして見やすくする（シンタックスハイライトする）ためのJavaScriptライブラリ「highlight.js」を導入しました。
Bloggerへ「highlight.js」を導入
以下のコードブロックは、highlight.jsで装飾されています。
サンプルとしてもご覧ください。
基本の導入
highlight.js
undefined
今回は簡単に、CDNで設置します。
「cdnjs」からCSSをコピーして<head>直下へ貼り付けます。
<head>
<!-- highlight.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/default.min.css">Bloggerの場合は、空要素を閉じる必要があるので<link/>のように/を最後につけます。
<!-- highlight.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/default.min.css"/>さらに、「cdnjs」からJSをコピーして、</body>の上へ貼り付けます。
<!-- highlight.js JavaScript -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>Blogger本文での使い方
<pre>と<code>でソースコードを囲みます。
<pre><code>
ここにソースコードを書く
</code></pre>&"'<>はエスケープさせる必要があります。
HTMLエスケープできるWebツールなどを使って一括変換すると良いでしょう。
筆者はWeb制作小物ツールさんのHTMLエスケープツールをよく使用しています。
HTMLエスケープツール | Web制作小物ツール - dounokouno.com
入力された内容の「&」、「"」、「'」、「<」、「>」を参照文字に変換します。
classにlanguage-○○○と書くことで言語を指定できます。
<pre><code class="language-html">
HTMLコードを書く
</code></pre>言語は基本的には自動で判別してくれるので指定は不要ですが、うまく機能しないときなどは指定すると良いでしょう。
デザインの変更
テーマを選ぶ
Highlighting Previewsから好きなデザインテーマを探します。
Examples - highlight.js
Highlighting Previews
読み込んだCSSのdefault.min.cssを書き換えます。
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>弊ブログではWeb系のハイライトが見やすく、コントラストの強すぎないatom-one-dark.minを採用しています。
 |
| GitHub風やVSCode風などとにかくたくさんある |
テーマはたくさんあるので、見慣れたor見やすいものをお好みで。
cssでデザインの調整
サイトのデザインに合わせてマージンやフォントサイズ等を調整します。
pre{
margin: .8em 0;
padding: 0;
line-height: 1.5;
font-size: 1.5rem;
}
pre > code{
white-space: pre-wrap;
}このブログではwhite-space: pre-wrap;として端で行を折り返すようにしました。
コピーボタンを実装
mizusameさんのブログを参考に、コピーボタンを実装しました。
コードブロックにコピーボタンを実装する（Clipboard API 対応版）
ブログやサイトなどでのコードブロック（ソースコード表示）に、 highlight.js や Google Code Prettify 、 Prism などのシンタックスハイライターを用いたり、素の pre 要素と code 要素を使っている方は多いと思います。 そのよう...
mizunosame.blogspot.com
