はてなブログ無料版でソースコードをシンタックスハイライトする方法

最近、ソースコードを綺麗にブログに貼り付ける方法を知ったので共有。

プログラミングの記事を書くとき、ソースコードの部分を黒背景にしてシンタックスハイライトして…みたいなカッコいい感じにしたい！と思った。

こんな↓感じに…

def main():
    print("Hello,world!")

if __name__ == '__main__':
    main()

はてなブログで出来る方法をネット検索すると、はてなブログpro(有料版)でやる方法ばかりがヒットしてくるけれど、無課金勢でもやれる方法はないか模索。

どうやらJavascriptライブラリというものを使えばよいらしい。

今回はその中で、highlight.jsを使ってみる。

ブログ側の設定

まず、以下のページに飛んで、

cdnjsに書かれている<link>と<script>タグをコピーします。

https://highlightjs.org/download/

※現在はversion 11.7.0だけど、随時更新されるので最新のものをコピーしてください。

そして、先ほどコピーしたものに以下を追加します。

<script>hljs.initHighlightingOnLoad();</script>

合わせるとこうなります。

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

合体させた上記をコピーしたら、はてなブログの[ ダッシュボード ]→[ デザイン ]→[ カスタマイズ ]→[ ヘッダ ]へと移動し、[ ブログタイトル下 ]に張り付けます。

これでブログ設定はOK

ブログを書くとき

では、実際にブログを書いてみましょう。

まずは適当に文章を書いて…

[ HTML編集 ]に移ります。

ここに以下のタグを書きます。

この、<code></code>タグの中にソースコードを貼り付けます。

[ プレビュー ]で見てみましょう。

見にくいですね…(^^;)

これは配色を変える必要があるなぁ。

カスタマイズ

デフォルトの配色が気に入らない時は、別の配色にカスタマイズできます。

どんな種類があるかは、以下のサイトを参照。

https://highlightjs.org/static/demo/

例えば、「Monokai Sublime」なら、ヘッダーに貼り付けたタグを以下のように編集。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これでもう一度[ プレビュー ]を見てみると…