Markdown Lens — WYSIWYG & Review

AIが直した設計書を、見て・直して・確認する。

変更箇所をマーカーで確認し、本文をそのまま編集できる VS Code / Cursor向けMarkdown拡張 です。変更の近くにある「戻す」「確認済み」で、1件ずつレビューできます。アカウント・AI APIキーは不要です。

緑のマーカーで変更を見つける → 必要ならその場で編集 → ↶ 戻す / ✓ 確認済み。

このREADMEは 0.13.0 の機能を紹介しています。新しい操作画面は0.13.0、その他の機能画像は0.9.0〜0.12.0のサンプル文書を使って VS Codeの実際の拡張画面 を撮影したものです。ストア表示名は Markdown Lens — WYSIWYG & Review、コマンド名は Markdown Lens です。画像内には旧表示名が含まれます。

上部の Preview で見たまま編集し、MD で元のソースへ切り替えます。編集・差分確認・戻す・確認済みを、ひとつのPreviewで行えます。変更前は各変更の「変更前・差分を見る」で開きます。

文字を選ぶと書式バー、表を選ぶと行・列の操作が表示されます。検索・目次・画像の挿入・折りたたみ・スナップショットは ⋯ から開けます。書式バーは Alt+F10 でも開き、Esc で閉じられます。

できること

まず使ってみる

インストール

0.13.0では本文中心の画面に整理し、文字・表を選んだときに必要なツールを表示します。外部AI編集の自動反映やコピー＆ペーストの修正も含みます。Marketplaceの掲載バージョンが0.13.0未満の場合は、VSIXから更新できます。

VS Code: 拡張機能パネルで @id:iam74k4.markdown-lens-review を検索してインストールします。発行者は iam74k4 です。

Cursor / VSIXでのインストール: コマンドパレットで Extensions: Install from VSIX... を実行し、markdown-lens-0.13.0.vsix を選びます。更新後、古い画面が残る場合はウィンドウを再読み込みしてください。

Cursor向けOpen VSXは公開準備中です。VS Codeで検索にまだ反映されていない場合も、VSIXからインストールできます。0.13.0のVSIXが手元にない場合は、以下の手順でこのリポジトリから作成できます。

npm ci
npm run package -- --out markdown-lens-0.13.0.vsix

ローカル版（発行者 local-markdown-review）からの移行は 移行案内 を参照してください。公開準備と登録手順は 公開ガイド にまとめています。

レビューの流れ

1. AIに修正を頼む前に作業フォルダーを開き、エクスプローラーの Markdown Lens · 未確認 が「監視中」になるのを待ちます。
2. Markdownファイルを開き、Markdown Lens: 変更プレビューを開く を実行します。
3. Claude Code・Codex・Cursor・手動で同じファイルを編集すると、差分が自動で更新されます。
4. マーカーを確認し、↶ 戻す または ✓ 確認済み を選びます。本文を直接直すこともできます。

「確認済み」はレビューの基準を更新する操作です。ファイル保存やGitコミットはしません。 編集・復元した内容は「保存」または ⌘S / Ctrl+S でファイルへ反映します。

表の変更は、セルごとに確認

変更セルのそばにある ↶ / ✓ で、そのセルだけを戻す・確認済みにできます。他のセルはそのまま残ります。確認直後の「取り消す」にも対応します。

セルは同じ行・列の位置で対応付けます。行列数や列の配置指定が変わった表は、従来の表全体のレビューを使います。セルの確認は比較元だけを更新し、セルを戻した内容は明示保存でファイルへ反映します。

検索と目次を、必要なときだけ開く

⋯ → 本文を検索・置換、または ⌘F / Ctrl+F で本文を検索・置換できます。太字などの書式をまたぐ文字にも対応し、変更箇所だけ を選ぶと未確認の変更ブロックに絞れます。まとめて置換しても1回のUndoで取り消せます。

⋯ → 見出しナビゲーション で見出しと未確認件数を表示。クリックすると折りたたまれた節も開いて移動します。タブを閉じて開き直すと、前回の表示位置・折りたたみ・ソースの開閉状態から再開できます。

スクリーンショットを、そのまま貼り付け

本文または編集可能なソース欄へ画像を貼り付けると、Markdownの隣の .markdown-lens-images に保存して相対パスを挿入します。PNG・JPEG・GIF・WebP、1枚10MBまで。画像ファイルは貼り付け時に作成され、Markdownへの反映は 保存 で行います。Undoで挿入を取り消しても、保存済み画像は残します。

文字色・マーカーで、重要な言葉を強調

文字を選択し、ツールバーの A（文字色）／マーカー を押します。8色のパレットから選ぶだけで適用でき、カラーピッカーや #RRGGBB 形式で好きな色も指定できます。

本文・見出し・表のセル内で使えます。文字色とマーカーは重ねて適用でき、それぞれ解除・Undoできます。変更は下書きとして保持され、保存で同じ .md ファイルに反映されます。

色付き部分は <span style="color:#3984d5"> や <mark style="background-color:#fff2a8"> で保存します。Markdown Lensでは再表示・編集できます。色はMarkdownの標準仕様ではなく、GitHubなど表示先によって再現されない場合があります。

表は、行・列をワンタッチで操作

セルを選ぶと、表のすぐ上に操作ボタンが表示されます。行の ＋ / ↑ / ↓ / ゴミ箱、列の ＋ / ← / → / ゴミ箱 で追加・移動・削除できます。追加後は新しいセルへ移り、そのまま入力できます。

番号列を選んで「連番」をオンにすると、行の追加・削除・移動後に1から振り直します。画面例では中央の行を削除し、No列は 1・2、ID列は 101・999 のままです。操作はUndoで戻せます。

長い表は広く開き、変更セルを比較

表の変更箇所にある 変更前・差分を見る → 広く表示 を選ぶと、表に集中できます。見出し・先頭列を固定し、列幅の調整、変更行だけの表示、分類列でのグループ表示ができます。

セルを選ぶと、下部に変更前・変更後と全文を表示します。表示幅やグループを変えても、Markdownの内容は変わりません。

Mermaidも、文章と一緒にレビュー

mermaid のコードブロックを図として表示します。基本的なフローチャートでは、追加を緑、削除を赤、変更を黄で強調し、「変更前 / 差分 / 変更後」を切り替えられます。

Mermaidソースを直接編集すると、図も更新されます。複雑な図は変更前後を並べて比較します。ワークスペース内のローカル画像も本文と一緒にプレビューできます。

本文を編集しながら、元のMarkdownも見る

上部の MD でソース画面へ切り替えます。現在のMarkdownは直接編集でき、「確認済み」「比較元」は読み取り専用で確認できます。

通常は Preview で編集と確認を続け、前後を詳しく見たい箇所だけ 変更前・差分を見る で展開します。本文とソースは、どのウィンドウ幅でも一画面ずつ切り替えます。Previewへ戻ると、本文の読んでいた位置を復元します。

必要な見出しだけ開く

見出し左の ⌄ / › で、子見出し・本文・表・画像・Mermaidをまとめて開閉します。⋯ には すべて折りたたむ / すべて展開 もあります。

折りたたみ中も変更件数を表示。「次の変更」で移動すると、対象の節を自動で開きます。変更箇所だけ表示と併用できます。

レビューを続けやすくする機能

• 未確認一覧 — エクスプローラーにファイル名と変更件数を表示。レビュータブを閉じても監視を続けます。
• 確認の取り消し — 確認後の「取り消す」で、直前の確認を未確認に戻せます。
• スナップショット — カメラで現在の状態を保存し、履歴からその時点と比較できます。
• 下書きの保持 — 編集中に外部更新が入っても下書きを上書きせず、競合を表示します。

知っておきたいこと

• 初回読み込み前の変更は復元できません。AI編集前に監視を開始してください。
• 比較元・下書き・スナップショットは拡張専用ストレージに保存します。ネットワーク送信・AI呼び出し・テレメトリーはありません。
• 確認・復元は段落などのブロック単位。表はセル単位にも対応し、行列の構成が変わった場合は表全体が対象です。
• 見出しの折りたたみは文書ごとに保存します。自動採番の列指定はレビュータブ内で保持し、新しく開いたタブでは再設定してください。
• Mermaidの図形ドラッグ編集、結合セル、文字色・マーカー以外の任意HTMLや数式のWYSIWYG編集には対応していません。
• これは Markdown Lensの変更プレビュー の機能です。Cursor標準のMarkdownプレビューを置き換えるものではありません。

詳しい操作・対応範囲・保存データ・開発手順 · 変更履歴 · 0.8.0時点の全機能レビュー · 最新版の検証記録

npm ci
npm run check
npm test
npm run build
npm run test:tables
npm run test:diagrams
npm run test:rich

MARKDOWN_REVIEW_SCREENSHOTS=docs/images npm run test:ui

ライセンス

MIT License。同梱ライブラリのライセンスは THIRD-PARTY-NOTICES.txt を参照してください。