Visual Studio Code （VSCode） 1.8.1 で Markdown を書くときにフォントを等幅表示するのに手こずりました。
等幅フォントを指定する
ファイル → 基本設定 → ユーザー設定 を選択して settings.json を開きます。
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
"editor.fontFamily": "MeiryoKe_Gothic"
}
上記のように editor.fontFamily に任意の等幅フォントを指定します。オススメは MeiryoKe です。
Markdown を書いてみる
sample.md というファイルを作成して適当な Markdown を書いてみます。拡張子 .md を認識して言語モードが自動的に Markdown に代わります。
おや？ タイトルと罫線が一致していませんね。等幅フォントを指定しているのにどうしたことでしょうか。
いろいろと設定を試してみたところ、 等幅で表示されない原因が見えてきました。
言語モード Markdown
言語モードを Plaintext に変更すると正しく等幅表示されました。どうやら言語モードが Markdown になっていると表示幅がおかしくなるようです。配色テーマ Dark+ (default dark)
配色テーマとして Dark+ (default dark) などいくつかのテーマを使用していると表示幅がおかしくなるようです。配色テーマ Monokai などに変更してみたところ正しく等幅表示されるようになりました。
配色テーマとして以下のいずれかを使用していると Markdown モードで等幅表示されなくなってしまうようです。
- Dark (Visual Studio)
- Dark+ (default dark)
- Light (Visual Studio)
- Light+ (default light)
解決方法 1
一番簡単な解決方法は配色テーマを変えてしまうことですね。
解決方法 2
どうしても配色テーマ Dark, Dark+, Light, Light+ を使って Markdown を等幅表示したい場合は少し面倒な作業が必要になります。
以下では、 配色テーマ Light (Visual Studio) を修正する手順を説明します。
エクスプローラーで C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-defaults\themes を開くと、 いくつかの JSON ファイルがあります。
Light （Visua Studio) に対応しているファイルは light_vs.json です。これをテキストエディターで開いて編集します。
light_vs.json{
"name": "Light Visual Studio",
"settings": [
{
"scope": "emphasis",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "strong",
"settings": {
"fontStyle": "bold"
}
},
(省略)
ファイルの中を見てみると fontStyle として italic や bold が指定されている箇所がいくつか見つかります。これら italic、 bold をすべて normal に置換して上書き保存します。（念のために編集前のファイルをバックアップしておくことをお勧めします。）
Visual Studio Code （VSCode） を起動し直してから、 ファイル → 基本設定 → 配色テーマ を選択し、 Light (Visual Studio) に切り替えます。
無事、 Light (Visual Studio) 配色テーマでも Markdown が等幅フォントで表示されるようになりました。
