Jetbrains IDEのMarkdownプレビューの中華フォントを直す & カスタムする

Jetbrains IDEでビルトインのMarkdownプレビューが中華フォントになる

タイトル通りです。中華フォントに引っかかりがちな文字を入力するとこんな感じになります。

▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ うわあああああぁぁぁぁぁぁぁ

解決法

GoLand 2025.3.4 で確認した解決法ですが、他のIDEでもだいたい同じだと思います。

1. Render Engineの変更

基本的には Chromium になっていますが、フォントのフォールバックがうまくいかないことがあるようです。Compose Multiplatform ベースのエンジンに変更することでだいぶ良くなります。

設定の Languages & Frameworks > Markdown を開きます。
Preview rendering engine を Compose に変更後、プレビュー画面を開きなおすと治ります。

手軽に治せるのですが、段落間のマージンがだいぶデカくなるので読みづらいです。まだexperimentalなので、長い目で見守りましょう……。

2. カスタムCSSを使う

カスタムCSSで解決できます。こっちのほうがオススメです。

設定の Languages & Frameworks > Markdown を開きます。
Custom CSSのトグルを開くと設定が出てくるので、CSSファイルをロードするか、下に直書きするかします。

body {
  font-family: "Noto Sans JP", sans-serif !important;
}

code, pre {
  font-family: "JetBrains Mono", "Consolas", monospace !important;
}

/* ついでにカスタムもしちゃう */
h1 {
  border-bottom: 2px solid;
}

h2 {
  border-bottom: 1px solid;
}

Compose (preview) を使った場合、カスタムCSSは使えません。

いいですね！

おまけ1: もっとカスタムする

Markdownのレンダリング時に出てくるHTMLタグを知りたい場合、以下の手順でHTMLを出力して確認が可能です。

画面左上のハンバーガーメニューから、 Tools > Markdown > Export Makdown file To... を押します。

その後、Formatを HTML に変更することで出力されます。ゴリゴリにカスタマイズしたい場合は試してみてください。

おまけ2: JP Font Check

よく中華フォントになりがちな文字をgistにまとめておきました。たまに更新するかもしれません。