Windows環境で Visual Studio Code

インストール

https://code.visualstudio.com/ からインストーラーをダウンロードして実行。

以降、MarkdownPreviewのCSS設定について記述するが、既に中華フォント問題が解決しているのでdefaultのままでも問題ない。

MarkdownPreviewのCSS設定（新）

1.3.0-insider ぐらいからは、defaultのCSSに追加で markdown.styles で設定したCSSが適用されるようだ。

CSSファイルを用意

今回は、 C:\Users\<ユーザー名>\Work\_vscode に user.css を配置した。

見出しの下線をh1でなくh2に付けたかったので、user.css で調整

user.css

h1 {
  border: none;
}

h2 {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 5px;
}

CSS適用

File > Preferences > User Settings を開き、 settings.json へ以下のように記述。

settings.json

// Place your settings in this file to overwrite the default settings
{
	"markdown.styles": [
		"file://C:/Users/<ユーザー名>/Work/_vscode/user.css"]
}

MarkdownPreviewのCSS設定（旧）

version 1.2.1 ぐらいまでは markdown.styles に値を設定すると、defaultのCSS設定が消えてしまうようだ。

CSSファイルを用意

今回は、 C:\Users\<ユーザー名>\Work\_vscode に github.css と user.css を配置した。

user.css へは、以下のようにフォント設定を記述。

user.css

* {
  font-family: "Meiryo";
}

code, code span {
  font-family: "MS Gothic";
}

CSS適用

File > Preferences > User Settings を開き、 settings.json へ以下のように記述。

settings.json

// Place your settings in this file to overwrite the default settings
{
	"markdown.styles": [
		"file://C:/Users/<ユーザー名>/Work/_vscode/github.css",
		"file://C:/Users/<ユーザー名>/Work/_vscode/user.css"]
}

与 や 化 等が日本の字形で表示されれば問題ない。

github.css を使う場合の微調整

github.css を使う場合、余白が多いなど気に入らない点があったので、 user.css で微調整。

user.css

body {
  padding-top: 0px;
}

h1 {
  margin-top: 0px;
}

li, li ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

hr {
  border: 1px solid;
  height: 0;
}

その他の設定

必要に応じて settings.json へ追記。

settings.json

{
    // エディタのフォント設定
    "editor.fontFamily": "MS Gothic",
    
    // ウィンドウ幅に合わせて折り返し
    "editor.wrappingColumn": 0,
    
    // 半角スペースやタブの表示
    "editor.renderWhitespace": true,
    
    // タブでスペース挿入
    "editor.insertSpaces": true,

    // プロキシ設定
    "http.proxy":"http://..."
}