VS CodeでMarkdownをプレビューしながら編集できる拡張機能 Richdown
はじめに
VS CodeでMarkdownを書く時の煩わしさを解消したく、拡張機能作ってみました。
AIでの開発がメインになってくると仕様書や設計書、ほとんどのドキュメントがMarkdownになってきています。
Markdownを確認する機会が増えたからこそ、Markdown Lifeを充実させたい！ということで Obsidian のライブプレビューのようなMarkdown のソースを保ちながら、できるだけ読みやすい見た目でそのまま編集できる。VS Code 拡張機能の Richdown を作りました。
標準や人気のMarkdown Previewは「左で編集、右で確認」という分割プレビューで「ちょっとな〜」とか、Obsidianとか別アプリに移動するのも面倒だな〜と思っている方は是非使ってみてください。
作ったもの
Richdown は、VS Code 上で Markdown ファイルをリッチに編集するための拡張機能です。
Markdown ファイルを開くと、通常のテキストエディタではなく、CodeMirror ベースのカスタムエディタで開きます。Markdown の記法を完全に隠すのではなく、必要なときは編集できる状態を保ちながら、普段はできるだけプレビューに近い表示で書けるようにしています。
大きな特徴は...
- Markdown を1つのビューで編集・プレビューできる
- 見出し、引用、チェックボックス、リンク、画像を見やすく表示する
- Markdown テーブルを表として表示し、そのままセル編集できる
- Mermaid を図として描画できる
- コードブロックにシンタックスハイライトとコピーボタンを表示する
- テーマや表示幅をエディタ右下の設定ボタンから切り替えられる
機能紹介
1. 1つのビューで編集とプレビュー
Richdown は、左右分割のプレビューではなく、Markdown ファイル自体をリッチなエディタとして開きます。
見出しや引用、水平線などはプレビュー寄りの表示になります。行にフォーカスすると Markdown 記法を編集できるようにし、フォーカスが外れると読みやすい表示に戻る、という挙動を目指しています。
2. チェックボックス
タスクリストはチェックボックスとして表示します。
チェックボックスをクリックすると、Markdown の - [ ] / - [x] も更新されます。見た目は UI として扱いつつ、ファイルは普通の Markdown のままです。
3. Rich Table
Rich TableはMarkdownで面倒なテーブルを書く問題を解決します。
Rich Tableのまま、内容の更新や行・列の追加削除も可能にします。通常のMarkdown同様、リンクや画像の添付もできます。
コンテキストメニューの表示は右クリックです。
4. コードブロック
コードブロックは角丸のブロックとして表示し、右上にコピーボタンを重ねています。
json や ts など、言語指定がある場合はシンタックスハイライトも適用します。
まだ一部の言語に対応できていませんが、後々対応していきます。
5. Mermaid
Mermaid は遅延ロードにしています。
Markdown ファイルに Mermaid ブロックがある場合だけ renderer を読み込むようにして、通常の Markdown 編集が重くならないようにしています。
表示サイズは設定から切り替えられます。
- Source: ソース行数に合わせる
- Readable: 読みやすい最低高さを確保する
- Large: 図の複雑さに応じて少し大きめに表示する
さらに、プレビュー上のボタンから拡大・縮小・フィット・モーダル表示ができます。
6. テーマと表示幅
エディタ右下の設定ボタンから、Richdown 内のテーマと表示幅を変更できます。
テーマは VS Code のテーマに合わせる default のほか、いくつかのダークテーマ・ライトテーマを用意しています。表示幅も通常幅とワイド表示を切り替えられます。
7. その他
引用や箇条書きなどの一般的なMarkdown記法はもちろんのこと、<details>ブロックの折りたたみも対応しています。
実装の方向性
Richdown は VS Code の Custom Editor と webview を使っています。
通常の VS Code エディタの装飾だけでも、Markdown 記法を薄くしたり、見出しの見た目を少し変えたりすることはできます。しかし、表を本当に表として編集したり、Mermaid を同じビュー内で操作したりするには限界があります。
そこで、Markdown ファイルを Custom Editor として開き、webview 側に CodeMirror を載せる構成にしました。
ざっくり言うと、次のような構成です。
- VS Code extension 側で Markdown ファイルを Custom Text Editor として開く
- webview 内で CodeMirror を使って編集 UI を構築する
- 編集内容は VS Code の
WorkspaceEdit経由で元ファイルに反映する - 画像やリンクを開く処理は extension 側にメッセージを送って実行する
- Mermaid は必要なときだけ webview に読み込む
まだ改善したいこと
まだ作り込みたいところもあります。
- 長い文書でのパフォーマンス改善
- テーブル編集のさらなる操作性向上
- コードブロックの対応言語追加
- Mermaid の表示調整
- Marketplace 用のスクリーンショットやドキュメント整備
まとめ
Richdown は、VS Code で Markdown をもっと気持ちよく書くために作った拡張機能です。
分割プレビューではなく、1つのビューの中で Markdown を読みやすく表示し、そのまま編集できる体験を目指しています。
まだ初期バージョンですが、表編集、Mermaid、コードブロック、画像、リンクなど、技術記事やドキュメントを書くときによく使う要素はかなり扱えるようになってきました。
今後も、自分が日常的に Markdown を書く中で引っかかったところを直しながら育てていく予定ですので、宜しければご利用ください。
最後に
私が作成しているアプリを紹介します。興味がありましたらこちらも是非ご利用ください。（すべて広告は今のところありません）
piinxi
通知でコミュニケーションをとるサービスです。家族や友達、趣味のコミュニティを作成し、通知を送り合いリアクションをする、そんな静かなサービスです。通知には温度感の設定もできます。
FavBox
自分のお気に入りをひたすら集めて管理するサービスです。Webページのみならず、SNSの投稿やYoutubeまで管理できます。
今後は画像や動画、位置情報等、色々なもののお気に入りを管理できるようにしようと思っています。
Mivela
シークレットフォルダです。外部アクセスなし。端末内で完結します。
サブスクリプションはなく買い切りです。
Discussion