[VSCode]Markdownが見にくい時の解決方法

エディター
2019.06.12

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

プレビューが見にくい

どの程度見にくいのか、実際に見てみましょう。

↓のスクショのように、こうして並べてみるとわかりやすいのですが
見出しがH1なのかH2なのかが少々分かりづらくなっています。

また、色味が無いのでとても味気なく見えてしまいます。

これを、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が読み込まれるようになりました。

プレビュー を表示してみる

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

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

参考にしたサイト

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