このブログでは shiki を使ってコードハイライトを行っている。保存時にコード生成をするのだが、いくつかの問題があり、デフォルトではうまく動作しなかった。

Wasm が使えない

Cloudflare Workers は WebAssembly を使えない。

Shiki のデフォルト正規表現エンジンは Oniguruma（Wasm ベース）なので、そのまま使うとエラーになる。

CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder

対処

shiki/engine/javascript の createJavaScriptRegexEngine() を使い、Wasm を回避する。

import { createJavaScriptRegexEngine } from "shiki/engine/javascript";

const highlighter = await createHighlighter({
  themes: ["github-light", "github-dark"],
  langs: Object.keys(bundledLanguages),
  engine: createJavaScriptRegexEngine(),
});

エントリポイント

標準の @shikijs/markdown-it は engine オプションを直接受け付けない。

対処

@shikijs/markdown-it/core から fromHighlighter() を使い、自前で作った highlighter を渡す。

import { fromHighlighter } from "@shikijs/markdown-it/core";

md.use(
  fromHighlighter(highlighter, {
    themes: { light: "github-light", dark: "github-dark" },
    defaultColor: false,
  }),
);

CSS background-color の競合

Shiki はデフォルトで <pre> にテーマの background-color をインライン出力する。

対処

既存 CSS とぶつかる場合は defaultColor: false を指定し、CSS 変数のみ出力させる。

fromHighlighter(highlighter, {
  themes: { light: "github-light", dark: "github-dark" },
  defaultColor: false, // inline color を出さず CSS 変数のみ
});