Markdownのリアルタイムプレビュー、見やすくしたくない？

2019年2月23日 2019年4月27日

Markdownを書くときのエディターと言えば「Visual Studio Code（VS Code）」が最高に良い。

そのVS Codeで、Markdownのリアルタイムプレビューを綺麗に見やすくでき、さらにCSSをカスタムすること自分好みのプレビューへカスタマイズすることも可能に。

こりゃあ入れるっきゃない！ということで、VS Codeの拡張機能「Markdown Preview Github Styling」を紹介します。

Markdown Preview Github Styling とは

まず「Markdown Preview Github Styling」とは、VS Codeの拡張機能で、Markdownファイルのリアルタイムプレビューのスタイルを変更することができる拡張機能です。

CSSを触ることによって自分好みに編集でき、イメージがつかみやすいので超便利。

どのMarkdownファイルのプレビューにも共通で適応することができ、デザインの統一化もできる。

もちろん、個別にデザインを変えたい時は個別に行えばOK。

VS Codeの拡張機能Markdown Preview Github Stylingをインストール

インストールはいたって簡単。

Markdown Preview Github StylingでMarkdownのプレビューをカスタマイズ

拡張機能Marketplaceで「Markdown Preview Github Styling」と検索し、インストールボタンを押したら再読込を。そうすればもうインストールが完了しています。

タコさんっぽいアイコンのやつです。

デフォルトのMarkdownプレビュースタイル

「Markdown Preview Github Styling」拡張機能を入れただけだとこんな感じです。

Markdown Preview Github StylingでMarkdownのプレビューを。デフォルト状態 — Markdown Preview Github StylingでMarkdownのプレビュー（デフォルト状態）

背景が白くなり、綺麗に整備された状態のように見えますね。

この状態から、CSSでデザインを自由にカスタマイズします。

CSSでMarkdownリアルタイムプレビューのデザインをカスタマイズする

さてここからが本番ですね。

と言ってもいたって簡単なので安心してください。

まずはCSSファイルを開きます。「base.css」というファイルです。

場所は、
/Users/ユーザー名/.vscode/extensions/bierner.markdown-preview-github-styles-0.1.4/base.css
にあります。

Markdown Preview Github StylingのCSSをカスタマイズ

Macの方で隠しファイル「.」始まりのファイルを見れない方は以下の記事を参照してください。

関連記事

Macで「.htaccess」ファイルを編集できるようにする方法
2018年10月27日

あとはもうこのbase.cssの最後尾に自分好みのCSSを足していくだけ。

CSSのサンプルもおいておくので、とりあえずの人はコピペして利用してください。

見出し系の箇所（h1〜h5）にCSSをあてました。

コピペ用CSS

/*ここから追加CSS*/
h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

h2 {
position: relative;
padding: 0.6em;
background: #e0edff;
}

h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
h3 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
}

h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
h5 {
border-bottom: solid 3px black;
}

適用するとこんな感じの見栄えになります。