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

vscode

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 Code to experience a redefined code edit...

インストーラの指示に従ってやれば問題ないっす

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出力とかもできるので、今回導入した拡張機能はかなりオススメです。