VSCodeのMarkdownプレビューを簡単に超リッチに！「MarkdownPreviewStyleChanger」の紹介

こんにちは！今回は、VS CodeでのMarkdown執筆環境を劇的に改善する拡張機能「MarkdownPreviewStyleChanger」をご紹介します。

普段VS Codeで以前の記事を書いたり、
ドキュメントを作成したりしているとき、

「プレビュー画面がもう少し見やすければな…」
「気分に合わせてデザインを変えたいな」と思ったことはありませんか？

この拡張機能を使えば、40種類以上のテーマや見出しの装飾、フォントの変更などが簡単に設定でき、自分だけの快適な執筆環境を作ることができます。WordPressなどのブログ記事の下書きや、READMEの作成がもっと楽しくなりますよ！

MarkdownPreviewStyleChangerとは？
1. 主な機能
インストール方法
基本的な使い方
1. デザインの変更方法
さらに便利に！高度な使い方
1. 自分の好きなCSSテーマを作る（カスタムテーマ）
2. プロジェクト専用のCSSを適用する
まとめ

MarkdownPreviewStyleChangerとは？

VS Code標準のMarkdownプレビュー機能に対し、ボタン一つでデザインを切り替えられる機能を追加する拡張機能です。CSSを自分で書かなくても、豊富なプリセットから選ぶだけでリッチな見た目に変更できます。

主な機能

🎨 40種類の選べるテーマ: シンプル、ダークモード、Github風、ノートブック風など、多彩なテーマを搭載。
🏷️ 見出しの装飾: H1〜H6の見出しに「下線」「付箋風」「インダストリアル風」「女性向け」「ノート風」などのスタイルを適用可能。
🔤 フォントカスタマイズ: プレビューに使うフォントを自由に変更可能。
🎭 カスタムテーマ作成: 自分だけのオリジナルCSSテーマを作成・保存・管理できる機能。
🔧 プロジェクトごとのCSS: ワークスペースごとに個別のCSSを適用することも可能。

インストール方法

VS Codeを開き、左側のアクティビティバーから「拡張機能」アイコンをクリックします（または Ctrl+Shift+X / Cmd+Shift+X）。
検索バーに MarkdownPreviewStyleChanger と入力します。
「インストール」ボタンをクリックします。

もしくは、こちらからインストールしてください。

基本的な使い方

インストールしたら、早速使ってみましょう。

適当なMarkdownファイル（.md）を開きます。
右上のプレビューボタン（または Ctrl+K V / Cmd+K V）を押して、プレビュー画面を開きます。
コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）を開き、MarkdownPreviewStyleChanger: Open Preview を実行することでも開けます。

デザインの変更方法

設定はVS Codeの設定画面から行います。

1. 設定画面を開きます（Ctrl+, / Cmd+,）。

2. 検索バーに markdown preview と入力すると、MarkdownPreviewStyleChanger の設定項目が出てきます。

1. テーマの変更 (Theme)

MarkdownPreviewStyleChanger: Theme のプルダウンから好きなテーマを選びます。

Simple: 余計な装飾のないシンプルなスタイル
Github Light/Dark Like: GitHub風のスタイル
Notebook Like: 紙のノートのようなスタイル
High Contrast Like: 視認性の高いハイコントラスト
その他、DraculaやSolarizedなどの人気テーマ風も多数！

2. 見出しスタイルの変更 (Heading Style)

MarkdownPreviewStyleChanger: Heading Styleで見出しのデザインを変えられます。

underline: 実用的で見やすい下線スタイル
label: ポップな付箋風スタイル
rugged: 力強いインダストリアルなスタイル
feminine: 柔らかくエレガントなスタイル
notebook: ノートの罫線のようなスタイル

3. フォントの変更 (Font Family)

MarkdownPreviewStyleChanger: Font Family に使いたいフォント名を入力します（例: Biz UD gothic, 'Hiragino Kaku Gothic ProN', Meiryo など）。空欄の場合はシステムのデフォルトフォントが使われます。