はてなブログでかっこいいコードブロックをやりたい
それならhighlight.jsを使えばいいじゃないかということで、使用してみると以下の感じ。
CDNを利用したやり方しか、はてなブログではできないもようなので、コード部分にはHTMLを追加しないといけない。
こちらを参考に。highlight.js
(doseq [n (range 1 101)]
(cond
(zero? (mod n 15)) (println "FizzBuzz")
(zero? (mod n 3)) (println "Fizz")
(zero? (mod n 5)) (println "Buzz")
:else (println n)))設定箇所
headタグ内以下を追加。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <!-- and it's easy to individually load additional languages --> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/clojure.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script> <script>hljs.highlightAll();</script>
コードの書き方
nord.min.jsを指定しているが、背景色が黒だったため直に指定している。- フォントサイズも見やすく。
preタグとcodeタグの前後に改行が入ると、出来上がりも不要な改行が入ってしまうので、このような書き方になっている。
<pre style="background-color:#2E3440;"><code class="language-clojure" style="background-color:#2E3440; font-size:15px;">(doseq [n (range 1 101)] (cond (zero? (mod n 15)) (println "FizzBuzz") (zero? (mod n 3)) (println "Fizz") (zero? (mod n 5)) (println "Buzz") :else (println n)))</code></pre>
