今回は、Bloggerでコードを変えた時にそのコードを綺麗に表示するための方法である、highlight.jsの使い方を解説していきたいと思います。Markdownの形式で書いたコードをHTMLのコードに書き換える方法については、こちらの記事で扱ってますので、またやり方を知らない場合はこちらの記事もぜひ確認してみてください。
Bloggerでコードをきれいに表示する方法
今回は既にHTMLコードがある場合に、そのコードブロック入りHTMLをきれいに表示する方法を解説したいと思います。Bloggerでコードを綺麗に表示する方法はいくつか存在しますが、MarkdownのコードをHTMLに変換した時のコードを再利用しやすい方法としては、highlight.jsがありますので、highlight.jsの使い方を今回は紹介します。
hightlight.jsの使い方
設定
まずはhighlight.jsのトップページにアクセスします。
highlight.js
少し下の方にスクロールすると使い方を解説している部分があります。一番下の方にHTMLで使う場合のコードが記載されています。
こちらのコードをBloggerに貼り付けることで使えるようになるのですが、いくつか注意点があります。
まず、初めに、このまま貼り付けてしまうと、Blogger上ではエラーとなってしまうので、scriptタグの一番後ろにはスラッシュを追加する必要があります。また、中段にあるスクリプトはマイナーな言語などを読み込むためのJavaScriptになっているので、マイナーな言語は使わないという場合にはこちらを削除しておくほうが読み込み速度を高速化できます。
HTML編集
最終的に貼り付けるべきコードは以下のようなコードになります。
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>
貼り付け方については、HTMLの編集になりますが、これはBloggerのトップページのテーマからカスタマイズの横の矢印をクリックしてHTMLを編集から行えます。その中のheadタグの終わりの直前に記入します。
HTMLの編集方法についてよくわからない場合は、こちらの記事も参考にしてください。
保存して次話投稿で実際にどのように表示されるのか確認してみます。投稿の際にはHTML部分に以下のようなコードを貼り付けてください。プレタグとコードタグで囲まれている部分がコードとして認識されます。実際に投稿すると、以下のように表示されます。
<pre><code class="language-python">
import pandas as pd
df = pd.read_csv('test.csv)
</code></pre>
デザインのCSSを変更してをよりかっこよくしよう！
デフォルトのままだとレイアウトが少し微妙だなと思う場合は、次の方法でレイアウトを変更できます。
テーマ選択
まずは、使い方のトップページからDemoを選びます。すると以下のURLに飛びます。
でもページ
このページでどのようなテーマを選ぶと、どのようなレイアウトになるのか確認することができますので、自分がよく使う言語を選択して実際のコードの部分にコードに入力してみましょう。
そして、テーマを色々と選択するとレイアウトが変わるのが確認できるかと思います。ここで気に入ったテーマの名前を覚えておきます。基本的にはここで覚えたテーマの名前にdefaultの部分の書き換えに使えます。デフォルトの部分を選んだテーマ名として書き換えます。
例えば、githubというテーマを選んだ場合は、「default」の部分を選んだテーマ名githubに書き換えます。この設定にして投稿した場合は、このように表示されます。自分の好きなテーマを選んでレイアウトを調節してみてください。
CSSはこちらでも確認できます。
コードの書き換え
書き換えた例がこちらです。
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>
これでBloggerできれいなコードが表示できるようになりました。
次回はこのコードブロックにコピー機能をつける方法を解説していきます。
