Windows
VisualStudioCode

Windows環境で Visual Studio Code

More than 1 year has passed since last update.


インストール

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\_vscodegithub.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://..."
}