Skip to content

Instantly share code, notes, and snippets.

@xareelee
Last active April 28, 2022 03:01
Show Gist options
  • Save xareelee/8981c7686077298701fb41643df71b27 to your computer and use it in GitHub Desktop.
Save xareelee/8981c7686077298701fb41643df71b27 to your computer and use it in GitHub Desktop.
VSCode等寬中文字的問題

VSCode 想等個寬,太難了 (借用標題)

緣由 (是個古老的坑):

  • VSCode 的等寬字,在中英文會有排版不對齊的問題。這在寫 markdown Table 時,會有嚴重跑版的問題。
  • 問題是來自於 VSCode 是用 Electron 開發,也就是介面顯示是由 Chromium 渲染導致 (Chromium 對中文等寬字渲染不對齊的 bug)。
  • 目前沒看到有人修正這個根本性問題;目前的 workaround,就是改用能夠使中英文保持 2:1 等寬的字型。

來找個可用字型 (繼續排坑):

  • 目前網路上找到顯示正常的只有「更紗黑體 (sarasa)」和「M+ Font
  • 更紗黑體搭配我目前的中文輸入法,會有嚴重跑標的問題 (輸入光標位置和顯示位置不在同一個地方)。因此最終只有 M+ Font 可選。
  • M+ Font 的坑也不小,光是 macOS 的 brew 就顯示一堆可用字型,但並非每個都能在 VSCode 正常等寬。
$ brew search mplus                     
==> Casks
font-gentium-plus        font-m-plus-1-code       font-m-plus-code-latin   font-mplus-nerd-font     malus
font-m-plus-1            font-m-plus-2            font-mplus               font-rounded-mplus       steam-plus-plus
  • 唯一的方法就是下載每個字型,在 macOS 中的 Font Book 中找到該字型的 Family,然後在 VSCode 的 settings.json (透過 Command Palette >Preference: Open Settings (JSON)) 進行設置 (儲存後立刻生效),然後到 Markdown 編輯一個 Table 看顯示效果。
  • 最後選擇 M PLUS Code Latin,能中英字等寬比例對齊,而且英文字不會太高瘦。

M+ font 一樣會跑版的字型有: font-mplus-nerd-font

能等寬、但是英文字太醜的字型: mplus-1m-regular

不廢話,安裝:

$ brew install --cask font-m-plus-code-latin   

VSCode 的設定。因為不希望影響其他寫代碼的字體,因此只配置給 Markdown (在 .ipynb Notebook 中也會生效)。配置時字型 Family 有空格可用引號 (不加也沒差),然後可設多個字型 fallback 機制。

"[markdown]": {
    "editor.tabSize": 4,
    "editor.fontFamily": "'M PLUS Code Latin', MesloLGS Nerd Font Mono, Menlo, Monaco"
},

參考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment