Blogger でシンタックスハイライティング
そもそもなんで Blogger に書いてるかというと、ちょっとしたメモ書きたいなと思うと Qiita はなんか違うし、Zenn ほどガッツリ書くわけでもないしで戻ってきたわけです。
How to Add Code Syntax Highlighting to Blogger https://blog.paoloamoroso.com/2021/10/how-to-add-code-syntax-highlighting-to.html
これを参考にしてやってみます。
1. highlight.js のリンクを調べる
JavaScript で指定した場所を Syntax Highlighting してくれる highlight.js というライブラリがあります。
highlight.js
Bloggerには画像以外のファイルは置けないので、CDNに設置されているjsのリンクを探します。昔はこういう事できなかったな〜。いい時代になりましたね。
GoogleさんのCDNがあるので調べてみる。
Hosted Libraries | Google Developers
https://developers.google.com/speed/libraries?hl=en
(hl=jpのリンクだとなんだか翻訳がおかしいのでenのリンク貼っときます)
(hl=jpのリンクだとなんだか翻訳がおかしいのでenのリンク貼っときます)
しかし、ここには highlight.js はない模様。
Cloudflare がやっている cdn.js から持ってきましょう。
highlight.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
ここから css と JavaScript のリンクを持ってきます。
<script crossorigin="anonymous" integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
CSS
CSSは好きなテーマから選ぶことが可能です。
https://highlightjs.org/static/demo/
isbl-editor-dark にしてみます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/isbl-editor-dark.min.css" integrity="sha512-35eVO1O7/yVv/H2UAzRkSwt7/04PX7n9D1NRVjD2f4B3gF5KUFpATdKgrR++Wfjpo1ft7UeY8jE2IfHzsrFMfQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
title タグのすぐ下にCSSを、bodyタグの閉じる前にJavaScript を持ってきます。
2. テーマを編集する
Blogger のテーマはhtmlで編集することが可能です。
右側に表示されている 「テーマ」を選択します。
次に現在選択しているテーマの「カスタマイズ」のボタンの右端をクリックしてドロップダウンするとメニューが出てきます。
その中の「HTMLを編集」を選択します。
3. 貼る
この状態で <pre><code> 〜 </code></pre> タグで囲むとこんなふうに表示してくれるようになります。
Blogger では < と > はセキュリティ対策のために省略されてしまうので、html などのコードはうまく表示されないので注意です。
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
--heading-1: 30px/32px Helvetica, sans-serif;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
コメント