VSCodeのMarkdown環境を整える　～その6 CSS拡張～

はじめに

第6弾で最終回のVSCodeのMarkdown環境を整えていきたいと思います。

今回はプレビュー機能で表示される画面のCSSをカスタマイズしていきたいと思います。なお、前提として今回は拡張機能であるMarkdown Preview Enhancedで表示されるプレビュー機能をカスタマイズしたいと思うので事前にインストールしておく必要があります。

環境

VSCode
- 1.48.2
Markdown Preview Enhanced
- 0.5.13

改善したい項目一覧

改善したい点は以下になります。

アウトライン機能　　　　 ←　済?
画像ファイルの貼り付け　 ←　済
リアルタイムプレビュー　 ←　済
ショートカット機能　　　 ←　済
Lint機能（Typoraにはない機能）　←　済
CSS拡張　←　今回はここが対象

やりたいこと

デフォルトで見づらいcssを自分好みにカスタマイズして可読性をあげる。

設定方法

beforeとafterの比較

まず初めにbeoforeとafterはこんな感じです。

6.1.1. before：デフォルト設定

Preview Theme
- github-light.css
他カスタマイズなし

6.1.2. after：カスタマイズあり

Preview Theme
- github-light.css
個別カスタマイズあり

6.2. カスタマイズ手順

なお、これ以降の手順は私のcss設定なので自分好みに適宜変更してください。

6.2.1. コードブロックテーマの変更

Markdown Preview Enhancedのデフォルトのプレビューテーマはauto.cssになっているので変更します。

Ctrl + ,で設定を開く
検索バーにPreview Themeを入力する。
Markdown-preview-enhanced:Code Block Themeのセレクトボックスをatom-material.cssに変更する。

6.2.2. プレビューテーマの変更

Markdown Preview Enhancedのデフォルトのプレビューテーマはgithub-light.cssになっているので変更します。

Ctrl + ,で設定を開く
検索バーにPreview Themeを入力する。
Markdown-preview-enhanced:Preview Themeのセレクトボックスをvue.cssに変更する。

6.2.3. 個別カスタマイズ

プレビューテーマの変更とは異なり自身で作成したcssを適用していきます。これはプレビューテーマの設定が上書かかれますので、ベースのPreview Themaの設定に合わせて変更してください。

Ctrl + Shift + Pでコマンドを開く
検索バーにMarkdown Preview Enhanced:Customize CSSを入力しEnterをクリックする。
style.lessファイルが表示されるので中身を下のcssに変更する。

拡張子lessはcssの拡張メタ言語なのでlessの書き方を知らなくてもcssで記述して問題ありません。

// VScode側の設定
// Code Block Theme：atom-material.css
// Preview Theme：vue.css
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
.markdown-preview.markdown-preview {
@linkcolor : #6DC1FF;
@themecolor : #224B8B;
// ======================== リンク ========================
a{
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
position: relative;
left: 1.0em;
margin-right: 1.4em;
// right: 1.5em;
color: @linkcolor;/*文字色*/
&:before{
content: "\f0c1";
font-family: Fontawesome;
margin-right: .4em;
position: absolute;
left: -1.0em;
}
&:after {
position: absolute;
bottom: 0;
left: 50%;
content: '';
width: 0;
height: 2px;
background-color: @linkcolor;
transition: .3s;
transform: translateX(-50%);
}
&:hover::after{
width: 100%;
}
}
// ======================== 見出し ========================
h1 {
font-size: 1.8em;
color: @themecolor;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px @themecolor;/*上線*/
border-bottom: solid 3px @themecolor;/*下線*/
}
h2 {
font-size: 1.6em;
padding: 0.3em;/*文字周りの余白*/
padding-left: 0.5em;
color: @themecolor;/*文字色*/
background: #c7def0;/*背景色*/
border-left: solid 5px @themecolor;/*左線（実線 太さ 色）*/
}
h3 {
font-size: 1.4em;
color: #494949;/*文字色*/
border-bottom: solid 3px #c7def0;
&:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px @themecolor;
// bottom: -3px;
width: 20%;
}
}
h4 {
font-size: 1.1em;
// padding: 0.2em;/*文字周りの余白*/
padding-left: 0.9em;
color: #494949;/*文字色*/
border-left: solid 5px @themecolor;/*左線（実線 太さ 色）*/
}
//  ``ブロック
code {
color: #ff8400;/*文字色*/
// background: #f3f3f3;
}
}