はじめに
Claude Codeを利用し始めてから、Markdownファイルを読む機会が大きく増えました。ドキュメント、README、設計書など、様々なMarkdownファイルを日々確認する中で、「もっと読みやすくしたい」と思うようになりました。
そこで、Claude Codeを活用してこの拡張機能 Markdown Preview in Extension Area を開発しました。Markdownプレビューをサイドバー（またはパネル）に固定表示することで、ドキュメントを快適に閲覧できるようにします。
⚡ 3行まとめ
| ポイント | 詳細 |
|---|---|
| 👥 おすすめの人 | Markdownでドキュメントを頻繁に読む方、快適に閲覧したい方、タブ切り替えの手間を減らしたい方 |
| 🎯 拡張機能エリアに常時表示 | プライマリサイドバー、セカンダリサイドバー、パネルのいずれかに表示可能。タブ切り替え不要 |
| 🎨 高機能プレビュー | Mermaid図、シンタックスハイライト、テーマ切替、ズーム機能など |
👥 おすすめの人
Markdown Preview in Extension Area は、以下のような方におすすめです：
- Markdownでドキュメントを頻繁に読む方
- 快適に閲覧したい方
サイドバーに固定されたプレビューで、Markdown閲覧の快適性が大きく向上します。
主な機能 ✨
🎯 拡張機能エリアに常時表示
プライマリサイドバー、セカンダリサイドバー、パネルのいずれかに表示することができます。
| 機能 | 説明 |
|---|---|
| ファイルナビゲーション | 同じディレクトリ内の前後のMarkdownファイルへ素早く移動できます |
| ピン機能 | プレビューを特定のファイルに固定し、他のファイルを開いてもプレビューを維持できます |
| エディタで開く | プレビュー中のファイルをエディタタブで開けます |
🎨 高機能プレビュー
快適な閲覧体験のための多彩な機能を提供します。
| 機能 | 説明 |
|---|---|
| テーマ切り替え | ライト/ダークテーマの切り替えが可能で、VS Codeのテーマに自動追従することもできます |
| ズーム機能 | 50%〜200%の範囲でプレビューを拡大縮小できます |
| Mermaid図のサポート | Mermaid記法で図を描画し、ホバー時にコードのコピーや図をPNG画像として保存できます |
| シンタックスハイライト | コードブロックに言語指定すると自動でハイライトが適用され、ホバー時のコピーボタンでコードをコピーできます |
| テキストコピー機能 | 選択したテキストを通常形式または引用形式でクリップボードにコピーできます |
| その他の便利機能 | ファイルパス表示、テーマ対応スクロールバー、README自動表示、プレビュー永続化、スクロール位置リセットなど |
🗂️ サイドバー機能
Outline/Files/History/Helpの4つのタブを持ち、各種情報を確認できます。
| タブ | 説明 |
|---|---|
| Outline | 見出し構造を階層的に表示し、クリックでその位置へジャンプできます |
| Files | 同じディレクトリのMarkdownファイルを名前順または更新日時順でソート表示できます |
| History | 最近プレビューしたファイルの履歴を新しい順に表示し、Clearボタンで全削除できます |
| Help | 機能とショートカットのクイックリファレンス |
インストール方法 💾
VS Code Marketplace から検索してインストールできます：
- VS Code で Extensions ビュー（
Cmd+Shift+X/Ctrl+Shift+X）を開く - "Markdown Preview in Extension Area" で検索
- Install をクリック
または、以下のコマンドでインストール：
code --install-extension nacn.markdown-previewer-in-extension-panel
リンク 🔗
- GitHub リポジトリ : https://github.com/NaokiIshimura/vscode-markdown-previewer-in-extension-panel
- VS Code Marketplace : Markdown Preview in Extension Area
フィードバックや機能要望は、GitHubのIssuesでお気軽にお知らせください！ 💬