【VSCode】Markdown PreviewにCSSを効かせる part1

vscode

Visual Studio Code って Markdown 形式のファイルだと
Preview機能が付いてるんですよね
しかしながら、デフォルトの設定だとちょっと見辛いんですよね。。。

これを、自分の好きなようにCSSを設定できるんです!
早速やってみましょう〜

スポンサーリンク

適用するCSSを作成する

ここで作成するStyle.cssは、workspace毎のCSSになるので、
配置場所はworkspace直下にしておきましょう

Style.css

h1 {
  padding-bottom: 0.3em;
  line-height: 1.2;
  border-bottom: solid 1px whitesmoke;
}

h2 {
  padding-bottom: 0.3em;
  padding-left: 0.1em;
  border-left: solid 5px darkcyan;
  border-bottom: solid 1px whitesmoke;
}

h3 {
  padding-bottom: 0.2em;
  padding-left: 0.2em;
  border-left: solid 15px darkcyan;
  border-bottom: solid 1px whitesmoke;
}

th {
  background-color: darkcyan;
}

td {
  background-color: gray;
}

pre, code {
  background-color: lightblue;
}

VSCODEに Style.css を読み込ませる

  1. VSCODEを開いた状態で [ Ctrl + Shift + P ]
  2. > open workspace settings を入力して Enter
  3. 設定画面が表示されるので、画面上部の検索窓に [ markdown.styles ] を入力
    Edit in settings.json というリンクがあるので、クリック
  4. settings.jsonに下記内容を追記

settings.json

{
  "markdown.styles": [
    "Style.css"
  ]
}

これで、先程作成したStyle.cssが読み込まれるようになりました。

Preview を表示してみる

拡張子[ .md ]ファイルを作成し、見出し等をつけて文章を作成してみてください。
プレビューを表示すると、先程作成したStyle.cssが効いた状態で表示されるはずです。

ちなみに、Previewを開いた状態でStyle.cssを更新しても
リアルタイムで反映はされないので、再度Previewを表示し直してくださいね。

参考にしたサイト

Visual Studio Code の CSS を見やすくカスタマイズしてみました