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

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をインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

あとはもうこの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;
}

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

 

白い背景が嫌だったら、一番cssファイルの最初に書いてある

body {
background: white;
}

ここを消すか好きなカラー指定にするかしてあげれば解決します。お好みで。

ちなみに、今回適用したおしゃれな見出しデザインは、サルワカさんの「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」からCSSをいただきました。

超オススメで、いつもお世話になっています。

まとめ

プレビュー画面が自分好みに変更できるだけでイメージがつかみやすく、作業もはかどります。

ただ、自分で管理するだけのものならこれで良いのですが、提出書類をMarkdownで書いてpdf出力して提出！となると、残念ながら今回適用したスタイルデザインは出力ファイルには適用されません。

そんなときは、「Markdownファイルに直接cssを書く」ことで解決します。

styleタグで囲うのを忘れずに

styleタグで囲ってあげれば、CSSタグ自体は見えず、スタイルだけきちんと適応してくれます。

もしかしたら邪道？なのかもしれませんが、私の見つけた方法がこれです。

資料作成が楽しくなるし、資料を見た人は「お〜すごい！見やすい！」となってくれるし、効率もぐんと上がるし、超オススメ！

htmlファイルに出力する場合は、出力したあとhead内に書き足しても良し。

色んな使い方ができておもしろいMarkdown記法と便利に使えるエディターVisual Studio Code。

まだ使ってない方は是非使ってみてください！

▷Visual Studio Code関連の記事を見る

『WEBデザイン』関連の記事をチェック