ブログのコードブロックにシンタックスハイライトを適用した話

はじめに

前回カード型の外部リンクコンポーネントに引き続き、コードブロックにシンタックスハイライトを適用しました。 こんなかんじ。

package main

import "fmt"

func main() {
    fmt.Println('Keep greeting to world forever.')
}

実装のはなし

今回はプラグインを導入しただけです。 サボっています。

highlight.js を使用しています。

GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.

JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js

GitHub

導入したら、markdown -> html の変換時に highlight.js が適用されるよう設定を行うだけです。

markdown の内容から言語を取得し、言語に応じたハイライトができるよう設定する必要があるのかと思いましたが、highlight.js がよしなにやってくれていました。感謝。

(追記) そんなこともなかったです。 言語ごとのハイライトスタイルを登録する必要があるみたいですね。

import go from "highlight.js/lib/languages/go";
// ...
hljs.registerLanguage("go", go);

// Apply syntax highlight for code block
renderer.code = (code, lang) => {
  // If language is not specified, treat as bash code
  code = hljs.highlight(code, { language: lang || "bash" }).value;
  return ` <code class="hljs language-${lang}"><pre>${code}</pre></code>`;
};

テーマはエディタと同じく hybrid というものを適用させました。 提供されている css を _app.tsx で読み込ませます。

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

さいごに

ライトモード / ダークモード双方で映える背景色を探すのは諦めました。 ダークモードでの単行の場合少し見にくいですね。

もう 1 点、コードブロックの頭で改行しないと謎の一文字分のスペースが挿入されてしまうのですが何なのでしょう。 そのうち解決します。

（追記）解決しました．また書こうと思います．