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 edito...
インストーラの指示に従って進めれば問題ありません
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);
}
}
↓こんな感じでスタイルが当たって見えるようになりますー↓

視覚効果で作業効率もアップ
どうでしたでしょうか。
Markdownに慣れてきて書くのは早くなったけど、見返してみるとプレビューがイケテナイ
そんな事を思い始めているならこれはかなり感動する効果ではないでしょうか。
ちなみにHTML出力とかもできるので、今回導入した拡張機能はかなりオススメです。