Visual Studio Code のmarkdownプレビューのスタイルを簡易カスタマイズ

Visual Studio Codeの markdownプレビュー機能をなるべくお手軽にカスタマイズする方法をメモ。 Ver 1.0.0, Windows版で確認した内容になります。

「とりあえず日本語フォントだけでもどうにかしたい」場合には有効かも。

Visual Studio CodeのMarkdownプレビュー機能

Visual Studio CodeはMarkdownをプレビュー表示する機能があります。並べて表示することも可能でその際にはリアルタムでプレビューも表示されて結構便利です。

スタイルはCSSで定義できる

プレビュー表示時のスタイルはCSSで定義されていて、カスタマイズも可能です。カスタマイズはpreferece で "markdown.styles" に独自のCSS設定することで実現します。これについては以下のオフィシャルドキュメント参照。

code.visualstudio.com

部分的には上書きできないっぽい

ただしこのカスタマイズ、部分的に上書きするという方法が適用できないようです。

body{
  font-family:Meiryo;
}

だけのファイルを"markdown.styles"で指定しても、font-family以外はリセットされてChromiumの素のスタイル？で表示されます。

とはいえ、全体をいい感じになるようにスタイルを一から書くのも面倒ですよね…。

デフォルトのCSSをコピーして一部書き換える

ということで、ここはズルしてしまいます。デフォルトのスタイルを定義しているCSSは、インストール先に存在します。例えばここ。

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\languages\markdown\common\markdown.css

これを適当な場所にコピって来ましょう。例えば自分のユーザーフォルダ（C:\Users\<ユーザー名>）とかでもいいでしょう。

そしてコピーしたファイルを開いて、一部書き換えます。

今回はとりあえず、中華フォントになってしまう点だけに対処してみます。具体的には、bodyとcode要素に対するフォント指定だけ改変します。

※改変するにあたって、cssをアンミニファイしておくと作業が楽かと思います

まずはbodyのフォントにMeiryoを指定

先頭にMeiryoを追加してみました。

body {
  font-family: Meiryo, Segoe WPC,Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif;
  font-size: 14px;
  padding-left: 12px;
  line-height: 22px;
}

codeに幅固定フォントを指定

codeここはコードを表示する際のブロックなので、monospace系のフォントが良いでしょう。私はコーディングにMigu 1Mを使っているのでこれを指定します。ここで注意なのは、フォントによってはフォント名をシングルクォートで括ってやる必要があることです。

code {
  font-family: 'Migu 1M', Menlo,Monaco,Consolas,Droid Sans Mono,Courier New,monospace;
  font-size: 14px;
  line-height: 19px;
}

markdown.stylesの設定

CSSの書き換えが終わったら、PreferenceからUser Settingsで以下のように指定してあげましょう。

// Place your settings in this file to overwrite the default settings
{
    "markdown.styles": [
    "C:\\Users\\＜ユーザー名＞\\markdown.css"
    ]
}

これで、「VSCodeの元のスタイル＋一部だけ書き換えたスタイル」でmarkdownのプレビューが行えます。他にも改変したいところがあればちょこちょこ手を入れていけば、自分好みのCSSを作り上げれると思います。

きよくらの備忘録

「三日坊主と呼ばせない！日記」改め。主にソフトウェア開発関連の話題。