【VSCode】Markdown PreviewをCSSで読みやすくする方法

VSCodeを使い始めてそこそこ時間が経ちました
使い慣れてくるとあんな事もできるのかな？こんな事もできるのかな？
って思えてくる不思議なエディタです。ワクワクしますね。

実は、Markdown（マークダウン）でUMLも描けてしまいます。

今回は、以前の紹介した方法とは別の方法でCSSを適用します。

ちなみに前回の記事はこちら

今回はプラグインに合わせてやってみます

VSCodeをインストール
VSCodeに拡張機能を追加
新規ファイルを作成
CSSを記述
視覚効果で作業効率もアップ

VSCodeをインストール

VSCodeをインストールしていない方はこちらからDownloadしてください

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edit...

インストーラの指示に従って進めれば問題ありません

VSCodeに拡張機能を追加

上記2つのプラグインを入れましょう
install ボタンをポチッとです

install方法がよくわからない方はこちらを参考に

新規ファイルを作成

拡張子「.md」でファイルを作成してみてください
エディタの右上に小さいアイコンが表示されるようになっているので
それをポチッとクリックします

するとMarkdown記法で記述している内容をプレビューできる窓が右側に現れます

うわー便利ー

と思うと共に、なんか見出しの素っ気無さなが気になってきます
というわけで、先程追加したプラグインの機能を用いて
CSSを適用してみます

CSSを記述

「Ctrl + Shift + P」で検索窓を出します
「Markdown Preview Enhanced: Customize CSS」を入力してEnter
CSSを記述して保存

このstyle.cssに以下のソースを記述すると

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ 

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;  
  h1 {
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
  }

  h2 {
    position: relative;
    padding: 0.5em;
    background: #7db4e6;
    color: white;
  }

  h2::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
  }
}

↓こんな感じでスタイルが当たって見えるようになりますー↓