md-preview：サイドペインで Claude Code Markdown プレビュー

md-preview は、Claude Code Markdown プレビューを実現するコミュニティ Mod で、Hamza Zafar（hamzafer）による claude-code-mods コレクションの一部です。Claude が .md、.mdx、.markdown ファイルを書き込んだり編集したりすると、README.md changed · /md to preview というトーストが表示され、/md を実行するとチャットの横にペインが開き、GitHub と同じ見た目でレンダリングされたファイルが表示されます。

ペインには Prev、Next、Before、Render、Text、Browser、Close のボタンがあり、それぞれにホットキー（p、n、b、r、t、o、q）が割り当てられています。n と p キーで、このセッションで変更された Markdown ファイルを順に移動できます。b を押すと、ターンの最初の編集より前のファイルが現在のテキストと並べて表示され、最後の編集で変更されたブロックには緑のバーが付きます。/md compare <a> <b> で 2 つのファイルを並べて表示でき、o または /md open で同じページを自分のブラウザで開けます。

ページの描画方法は環境によって異なります。画像対応ターミナル（Ghostty、iTerm2、WezTerm、kitty。tmux 経由ではない場合）で Chrome または Chromium 系ブラウザがインストールされていれば、ページは PNG に描画されてペインに表示されます。それ以外の場合、ペインには見出し、リスト、表、コードブロックをターミナルの色で装飾したテキスト表示が出ます。マニフェストには Claude Code の最低バージョンの指定はありません。

録画では、小さなデモプロジェクトでこの Mod を読み込んだ Claude Code を起動し、/md README.md を実行します。コマンドはキーのヒント（n/p: next/previous · b: before | after · o: browser · r: render again · t: page/text · q: close）を返し、プロンプトの上に枠付きのペインが開きます。1 行目にはボタンが並び、2 行目には README.md 1/1 と表示され、その下にプロジェクトの README がテキスト表示で現れます。見出し demo-app と、コード部分が色付けされた "A tiny demo app. Run it with npm start." という行です。デモのターミナルは画像を表示できないため、レンダリングされたページではなくテキスト表示になっています。

インストールブロックのいずれかの方法を使ってください。どれも作者自身のマーケットプレイスから直接インストールします。インストール後、/reload-plugins を実行するか新しいセッションを開始してから、/md を使ってください。

Mod は 1 つの function-hooks モジュール hooks/register.tsx と、小さな Markdown パーサー（hooks/md.ts）、HTML ページビルダー（hooks/page.ts）で構成されています。tool.call フックは、Markdown のパスに対する Write、Edit、MultiEdit の呼び出しの前にファイルを読み取り、呼び出しを実行させて、その結果をそのまま返します。以下は hooks/register.tsx の GitHub レンダラーです。

const repo = await repoOf($, dir)
if (!repo) return null // not in a GitHub repo: the Markdown stays on this machine
const r = await $.process
  .run(['gh', 'api', '-X', 'POST', '/markdown', '--input', '-'], { stdin: JSON.stringify({ text: md, mode: 'markdown', context: repo }), timeoutMs: GH_TIMEOUT_MS })
  .catch(() => null)

repoOf は git remote -v に GitHub のリモートがあるかを問い合わせます。gh が失敗すると、GitHub でのレンダリングは 1 分間停止され、組み込みのレンダラーが使われます。HTML は $TMPDIR/md-preview/ に書き出され、短い sh スクリプトを通じてヘッドレス Chrome で一度に 1 つずつ描画されます。描画結果は内容ごとにキャッシュされます。Claude が編集したファイルはターンの終了後にバックグラウンドで描画されるため、/md を開くと、たいていはすでに描画済みのページが表示されます。

/config に設定項目はありません。すべてはコマンドとペインのキーで操作します。/md は最新のファイルを開き、/md <path> は任意の Markdown ファイルを開き、/md compare <a> <b> は 2 つを比較し、/md open はブラウザで開きます。別のコマンドが /md という名前を使っている場合、Mod は代わりに /mdview を登録します。Chrome のパスのリスト（CHROMES）、保持するファイル数（MAX_FILES）、キャッシュサイズ（CACHE_SIZE）などの上限を変えたい場合は、register.tsx の先頭にある定数を編集してください。

私たちは実行前に、プラグインが実行しうるすべてのファイル（plugin.json、hooks/hooks.json、hooks/register.tsx、hooks/md.ts、hooks/page.ts、型宣言、テスト）を読みました。package.json、インストールスクリプト、バイナリ、バンドルされたコードはなく、隠し文字やゼロ幅文字も見つかりませんでした。

• ネットワーク： 直接のリクエストはありません。GitHub のリモートがあり gh にサインインしている場合、Markdown のテキストは gh api を通じて GitHub の /markdown API に送信されます（register.tsx:592-594）。追加のオプトインは必要ありません。約 390 KB を超えるファイルはローカルでレンダリングされます。レンダリングされたページは、任意のホストからの画像を許可する Content-Security-Policy（page.ts:97）の下でヘッドレス Chrome に読み込まれるため、Markdown ファイル内のリモート画像はページの描画時に取得されます。Markdown 内のスクリプトは実行できません。
• プロセス： git ls-files と git remote -v（register.tsx:386、607）、gh api（593）、ヘッドレス Chrome を起動し自分で起動した Chrome だけを停止する固定スクリプトによる sh -c（49-67、675）、そしてブラウザボタン用の open または xdg-open（788）。
• ファイルの書き込み： $TMPDIR/md-preview/ のみ（ページの HTML、PNG の断片、使い捨ての Chrome プロファイル）。~/.claude、設定、シェルファイル、LaunchAgents、git フックには何も書き込みません。
• ファイルの読み取り： Claude が編集した Markdown ファイル、あなたが指定したファイル、そしてターンの最初のシェルコマンドの前に、git ls-files から取得したリポジトリ内の最大 200 件の Markdown ファイル。
• 環境変数： HOME、TMPDIR、TMUX、TERM_PROGRAM、TERM。これらはどこにも送信されません。
• デーモン、テレメトリ、プロンプトインジェクション： いずれもありません。プロンプトやツールの結果にテキストを追加しません。
• ゲーティング： tool.call フックはオブザーバーです。呼び出しの完了を待ち、結果をそのまま返します。validate はこれを .catch のないゲーティングフックとして指摘しています。ターンの最初のシェル呼び出しは Markdown のスナップショットを待ちますが、スナップショットはファイルを読み取るだけです。
• 外部要件： レンダリング表示には Chrome、Chromium、Edge、Brave のいずれかと画像対応ターミナル、そして任意で gh。いずれも必須ではなく、フォールバックとしてテキスト表示があります。
• ライセンス： MIT。リポジトリのルートに LICENSE ファイルがあります。

claude plugin validate はエラーも警告も報告せず、作者の 26 件のテストは Claude Code 2.1.291 ですべて成功しました。

macOS 上の Claude Code 2.1.291 で確認しました（validate、テスト、録画）。ペインが期待どおりでない場合は、次を確認してください。

• /md が不明なコマンドになる：/plugin で md-preview が読み込まれているか確認するか、/mdview を試してください。
• ページではなくテキストが表示される：ターミナルが画像を表示できない、tmux 内にいる、または Chrome が見つからなかったためです。原因を解消したら r を押すか、t で表示を切り替えてください。
• "Chrome could not draw the page" と表示される：r を押して再試行してください。Mod は自動では再試行しません。
• ファイルを変更してもトーストが出ない：追跡されるのは Markdown のパスだけで、シェルによる書き込みは git リポジトリ内でのみ検出されます。
• ペインに GitHub ではなく built-in と表示される：ファイルが GitHub リポジトリにない、gh からサインアウトしている、またはファイルが約 390 KB より大きいためです。