[VSCode]Markdown PreviewをCSSで読みやすくする方法 part2

エディター

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

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

今回は、以前の紹介した方法とは別の方法で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 C...

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

VSCodeに拡張機能を追加

  1. Markdown All in One
  2. Markdown Preview Enhanced

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

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

新規ファイルを作成

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

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

のっぺらして見にくい


うわー便利ー

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

CSSを適用します

  1. 「Ctrl + Shift + P」で検索窓を出します
  2. 「Markdown Preview Enhanced: Customize CSS」を入力してEnter
  3. 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);
  }
}

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

視覚効果で作業効率もアップ

どうでしたでしょうか。

Markdownに慣れてきて書くのは早くなったけど、見返してみるとプレビューがイケテナイ
そんな事を思い始めているならこれはかなり感動する効果ではないでしょうか。

ちなみにHTML出力とかもできるので、今回導入した拡張機能はかなりオススメです。