はてなブログにシンタックスハイライトを入れる

ソースコードを色分けして表示するやつを

sumisoコピペ用

<pre><code class="plaintext">plaintextとしてハイライトさせない</code></pre>

<pre><code class="python">#python</code></pre>

はてな記法でも対応しているが

現在利用してる編集モードが

見たままモード

はてな記法のシンタックスハイライトを利用するためには

はてな記法モードに切り替えなくてはいけない

見たままモードの

HTML編集で利用できる

シンタックスハイライトを導入する

今回入れたのはこれ

https://highlightjs.org/

189の言語と91スタイルあるらしい

そんなに使えこなせない

demoを見ながら適当にデザインを選び

usageの CDN Hosted を

はてなブログのデザインのフッタに貼る

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

atelier-lakeside-darkというデザインにしてみた

2020/06/11追記

目に赤がキツかったので

agate に変更

使うときは

HTML編集に

下記をコピペ

<pre><code class="html">...</code></pre>

htmlのところは対応している言語

...にコード

これでシンタックスハイライトしてくれる

ただしhtmlはHTML Escapeにかける必要あり

Free Online HTML Escape / Unescape Tool - FreeFormatter.com

ちなみに

plaintextとしてハイライトさせない

といった使い方もできる

マイクラのコマンドは対応していないので

plaintextを使うのもあり

参考サイト

はてなブログのシンタックスハイライトを綺麗にする - sw1227’s diary

sumisoクラフト

sumisoクラフトはてなブログ拠点

はてなブログにシンタックスハイライトを入れる