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

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

R.U.I

仕事中の固定メモは Markdown！ECサイト運営会社でWEBエンジニア/マーケターをしている R.U.I（ルイ）です。

HTML / CSS コーディングで活躍する VS Code で、Markdownのリアルタイムプレビューを綺麗に見やすくでき、さらにCSSをカスタムすること自分好みのプレビューへカスタマイズすることも可能なんです。

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

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

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の方で隠しファイル「.」始まりのファイルを見れない方は以下の記事を参照してください。

あわせて読みたい

Macで「.htaccess」ファイルを編集できるようにする方法 ずっとWindowsだった私は、今までの常識（Windowsでの常識）とこれからの常識（Macでの常識）が色んな所で乖離しているので、1つ1つ覚えていこうと思っているところ。そこで今回は、サイト運営には必須のファイル「.htaccess」ファイルを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;
}


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

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

body {
background: white;
}

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

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

2次元のルイ

ありがとうございます。いつもお世話になっています。

Markdownのリアルタイムプレビューを見やすくする方法についてまとめ

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

ただ注意点が1つあります。

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

しかしそれも解決方法があります。

PDF出力したファイルにもCSSを適用させる方法とは・・・

Markdownファイルに直接CSSを書く

です！

<style>
CSSの内容すべて
</style>

こんな感じに styleタグで囲ってあげれば、CSSタグ自体は見えず、スタイルだけきちんと適応してくれます。どこに書いてもOK。私はファイルの末尾に置いてます。

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

見栄えが良くなって、さらに効率も上がる。こりゃ使わない手はないってね。

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

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

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

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