記事内のコードがハイライトされます

Short の方では前から対応していたのですが こっちは昔からあるコードの関係で対応してませんでした

過去記事のコードだとハイライトされることを考慮してないので見た目が崩れるかもしれないですし かといって 新しいコードだけ対応するのも統一性がなくなります
そう思って対応しないでいたのですが 新規コードのみハイライト対応することにしました
統一性を気にしても 文体やカラー・フォントウェイトの使い方などを考えると すでに統一性はそんなにないですし いまさら気にしなくて仕方ないですしね

パーサは highlightjs のもので カラーテーマは独自のものです
中身は適当に自分が使ってるエディタや IDE のカラーを混ぜた感じです
8 ～ 9 割は VSCode です

highlightjs がコード中のタグに対応してた

実はもうひとつ対応しない理由がありました
コード中に span タグなどを使って 強調表示などをしている記事もあります
今後もその機能は使いたいです
しかし ハイライト表示するとなると 内側の HTML は全部消えて強調表示との共存はできなくなる……と思っていました

highlightjs の highlightBlock を使えば 自動でハイライトコードと元の HTML をマージしてくれました
普段はハイライトさせたいコードを渡して ハイライトタグ付きの HTML を返してくれる highlight 関数しか使ってなかったので知りませんでした
すごく便利です
完全自動の initHighlightingOnLoad や initHighlighting も中では highlightBlock を使っているので コードブロック中に span などのタグがあっても大丈夫です

こんなことができます

function fn(){
	for(const item of []){
		item.map(e => [e["x"], e["y"]]).filter(e => e[1]).forEach(e => fn(e, 100))
	}
}

ソースはこうなってます

<pre><code class="js">
function fn(){
	for(const item of []){
		<span style="background:linear-gradient(transparent 70%, #ffe5f8 75%);">item.map(e => [e["x"], e["y"]]).filter(e => e[1]).forEach(e => fn(e, 100))</span>
	}
}
</code></pre>

注意するところは span の中にキーワードがあると span の内側に hljs-keyword クラスの span ができることです
そうなると .hljs-keyword のスタイルのほうが強くなるので 内側に hljs-*** クラスが来ることを想定した CSS を書くか 背景色をつけるなど上書きされないスタイルにするなど工夫が必要です


また 元の HTML の維持は 元の HTML とハイライト済み HTML をマージしているもので code タグの中に span がある状態でパースしているわけではないです
なので span の区切る位置によっては思い通りにならない場合があるかもしれません