@commte/mdbrowse 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 commte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,178 @@
+[English](README.md) | 日本語
+
+# mdbrowse
+
+編集中の Markdown を、自分の CSS でブラウザに表示する。シェルコマンドを実行できるエディタなら何でも使える
+
+サーバーもポートも常駐プロセスも要らない。ショートカットを押すと現在のファイルが固定パスの HTML に変換され、開いたままのブラウザのタブがそれを拾う
+
+![ライトテーマ](docs/preview-light.png)
+
+## 何のために作ったか
+
+エディタ内蔵のプレビューは、エディタの中で描画されるので見た目に手を入れられない。サーバーを立てるツールなら自由になるが、常駐とポートを引き受けることになる。これはどちらでもない。pandoc の上に乗せたシェルスクリプトと、スタイルを収めた HTML が1枚あるだけ
+
+出力先が常に同じなので、ファイルを切り替えてもタブは増えない。すでに開いているタブの中身が入れ替わる
+
+## 必要なもの
+
+- [pandoc](https://pandoc.org/) macOS は `brew install pandoc`、Debian/Ubuntu は `apt install pandoc`
+- 現在開いているファイルのパスを渡してシェルコマンドを実行できるエディタ
+
+## インストール
+
+```sh
+npm install -g @commte/mdbrowse
+```
+
+インストールせずに試す場合
+
+```sh
+npx @commte/mdbrowse file.md
+```
+
+スタイルシートはパッケージに同梱されている。自分で編集したい場合は `~/.config/mdbrowse/head.html` に取り出す。以後はそちらが同梱版より優先される
+
+```sh
+mdbrowse --eject
+```
+
+<details>
+<summary>ソースからインストールする場合</summary>
+
+```sh
+git clone https://github.com/commte/mdbrowse.git
+cd mdbrowse
+./install.sh
+```
+
+`mdbrowse` が `~/.local/bin` に、スタイルシートが `~/.config/mdbrowse/head.html` に入る。再インストールしても自分で編集したスタイルシートは上書きされない。配布時の状態に戻したいときは `--force` を付ける
+
+</details>
+
+プレビュー用のタブを1回だけ開いて、そのままにしておく
+
+```sh
+mdbrowse --open
+```
+
+## 使い方
+
+```sh
+mdbrowse file.md   # 変換する（出力 HTML を上書きする）
+mdbrowse --open    # プレビュー用のタブを開く
+mdbrowse --path    # 出力先の HTML のパスを表示する
+```
+
+| 環境変数 | 既定値 | |
+|---|---|---|
+| `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | 出力先の HTML |
+| `MDBROWSE_HEAD` | `~/.config/mdbrowse/head.html` | スタイルとブラウザ側のスクリプト |
+
+## ページ内の操作
+
+右上に小さなバーが出る。テーマ、文字サイズ、本文幅、目次の表示を切り替えられる。選択はブラウザに保存されるので、再読み込みしても次に開くファイルにも引き継がれる。ディスクには何も書かず、サーバーも使わない
+
+右サイドバーの目次は、そのファイルの見出しから組み立てられ、スクロール位置に追従する。見出しが3つ以上あるファイルで表示される
+
+![ダークテーマ](docs/preview-dark.png)
+
+## エディタの設定
+
+### Zed
+
+`install.sh` が `~/.config/zed/tasks.json` を作る。既存のファイルがある場合は上書きせず、貼り付ける内容を表示する。あとは `~/.config/zed/keymap.json` にキーを追加する
+
+```json
+{
+  "bindings": {
+    "cmd-shift-m": ["task::Spawn", { "task_name": "Preview in browser" }]
+  }
+}
+```
+
+つまずきやすい点
+
+- 単独のキーの組み合わせにする。`cmd-k` から始まる2段のキーは、Zed 自身が前置きキーとして使っているため安定しない
+- `"context"` を書くなら `Workspace` にする。`Editor` に書くと `task::Spawn` は発火しない
+
+### VS Code / Cursor / Windsurf
+
+`.vscode/tasks.json`
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Preview in browser",
+      "type": "shell",
+      "command": "mdbrowse",
+      "args": ["${file}"],
+      "presentation": { "reveal": "never" },
+      "problemMatcher": []
+    }
+  ]
+}
+```
+
+`keybindings.json` で `workbench.action.tasks.runTask` に割り当てる
+
+### Neovim
+
+```lua
+vim.keymap.set("n", "<leader>mp", function()
+  vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") })
+end)
+
+-- 保存のたびに更新する場合
+vim.api.nvim_create_autocmd("BufWritePost", {
+  pattern = "*.md",
+  callback = function() vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") }) end,
+})
+```
+
+### JetBrains 系
+
+設定 → ツール → 外部ツール で `mdbrowse` を追加し、引数に `$FilePath$` を指定する。Keymap でショートカットを割り当てる
+
+### Emacs
+
+```elisp
+(defun mdbrowse ()
+  (interactive)
+  (start-process "mdbrowse" nil "mdbrowse" (buffer-file-name)))
+```
+
+### それ以外
+
+`mdbrowse /path/to/current/file.md` を実行できるエディタなら動く
+
+## 見た目を変える
+
+見た目に関わるものは `~/.config/mdbrowse/head.html` に集まっている。先頭の設定ブロック、それを使う CSS、バーと更新検知のスクリプトという構成で、配色とタイポグラフィは GitHub（Primer）に合わせてある。このファイルを直せば全ファイルのプレビューに反映される。バーで変更した値は、その人のブラウザ側で既定値を上書きする
+
+表示確認用に `sample.md` が入っている
+
+```sh
+mdbrowse sample.md
+```
+
+## 仕組み
+
+```
+エディタのショートカット → mdbrowse <file> → pandoc → /tmp/mdbrowse.html
+                                                      → /tmp/mdbrowse-stamp.js
+                                                              ↑
+                                       ブラウザがスタンプを見て、変化したときだけ再読み込み
+```
+
+変換のたびに1行のスタンプファイルも書き出す。ブラウザは無条件に再読み込みせず、このスタンプを見て、新しく変換されたときだけ読み直す。画像のあるページで定期的にちらつかないのはこのため。スクロール中と印刷中、バーを操作している間はスタンプの確認を止める。画像の寸法はセッションに記憶して、読み込み中にレイアウトがずれないようにしている
+
+元ファイルからの相対パス（画像や隣のファイルへのリンク）は、変換時に絶対 `file://` へ書き換える。HTML が `/tmp` にあっても画像が表示されるのはこのため。絶対パス、`http(s)`、`data:`、`mailto:`、ページ内アンカーはそのまま残す
+
+ページは静的なので、待ち受けているものは何も無く、終了させる必要もない
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,178 @@
+English | [日本語](README.ja.md)
+
+# mdbrowse
+
+Preview the Markdown file you are editing in a real browser, with your own CSS, from any editor that can run a shell command.
+
+No server. No port. No daemon. One shortcut renders the current file to a fixed HTML path, and the browser tab you already have open picks it up.
+
+![Light theme](docs/preview-light.png)
+
+## Why
+
+Editors render Markdown previews inside their own window and give you little control over the result. Server-based previewers give you control but ask you to keep a process and a port around. This does neither: it is a shell script on top of `pandoc`, plus one HTML file holding the styles.
+
+Because the output path never changes, switching between files does not open new tabs. The tab you already have simply shows the new file.
+
+## Requirements
+
+- [pandoc](https://pandoc.org/) — macOS: `brew install pandoc`, Debian/Ubuntu: `apt install pandoc`
+- An editor that can run a shell command with the path of the active file
+
+## Install
+
+```sh
+npm install -g @commte/mdbrowse
+```
+
+Or without installing anything:
+
+```sh
+npx @commte/mdbrowse file.md
+```
+
+The stylesheet ships with the package. To customize it, copy it to `~/.config/mdbrowse/head.html` — that copy wins over the bundled one from then on:
+
+```sh
+mdbrowse --eject
+```
+
+<details>
+<summary>Install from source instead</summary>
+
+```sh
+git clone https://github.com/commte/mdbrowse.git
+cd mdbrowse
+./install.sh
+```
+
+This installs `mdbrowse` into `~/.local/bin` and the stylesheet into `~/.config/mdbrowse/head.html`. Your stylesheet is never overwritten on reinstall; pass `--force` when you do want the shipped one back.
+
+</details>
+
+Open the preview tab once and leave it open:
+
+```sh
+mdbrowse --open
+```
+
+## Usage
+
+```sh
+mdbrowse file.md   # render (overwrites the output HTML)
+mdbrowse --open    # open the preview tab
+mdbrowse --path    # print the output HTML path
+```
+
+| Variable | Default | |
+|---|---|---|
+| `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | output HTML path |
+| `MDBROWSE_HEAD` | `~/.config/mdbrowse/head.html` | stylesheet and browser script |
+
+## In-page controls
+
+A small bar sits in the top-right corner: theme, font size, content width, and a toggle for the table of contents. Choices are stored in the browser, so they survive reloads and apply to every file you preview afterwards. Nothing is written to disk and no server is involved.
+
+The table of contents is built from the headings of the current file and follows your position as you scroll. It appears when a file has at least three headings.
+
+![Dark theme](docs/preview-dark.png)
+
+## Editor setup
+
+### Zed
+
+`install.sh` writes `~/.config/zed/tasks.json` for you — it will not overwrite an existing one; it prints the entries to paste instead. Then bind a key in `~/.config/zed/keymap.json`:
+
+```json
+{
+  "bindings": {
+    "cmd-shift-m": ["task::Spawn", { "task_name": "Preview in browser" }]
+  }
+}
+```
+
+Two things worth knowing:
+
+- Use a single key combination. `cmd-k`-style chords are unreliable here, because `cmd-k` is already a chord prefix in Zed's own keymaps.
+- If you scope the binding with `"context"`, use `Workspace`. `task::Spawn` does not fire from an `Editor` context binding.
+
+### VS Code / Cursor / Windsurf
+
+`.vscode/tasks.json`:
+
+```json
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Preview in browser",
+      "type": "shell",
+      "command": "mdbrowse",
+      "args": ["${file}"],
+      "presentation": { "reveal": "never" },
+      "problemMatcher": []
+    }
+  ]
+}
+```
+
+Bind it in `keybindings.json` with `workbench.action.tasks.runTask`.
+
+### Neovim
+
+```lua
+vim.keymap.set("n", "<leader>mp", function()
+  vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") })
+end)
+
+-- or update the preview on every save
+vim.api.nvim_create_autocmd("BufWritePost", {
+  pattern = "*.md",
+  callback = function() vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") }) end,
+})
+```
+
+### JetBrains IDEs
+
+Settings → Tools → External Tools → add `mdbrowse` with `$FilePath$` as the argument, then assign a shortcut under Keymap.
+
+### Emacs
+
+```elisp
+(defun mdbrowse ()
+  (interactive)
+  (start-process "mdbrowse" nil "mdbrowse" (buffer-file-name)))
+```
+
+### Anything else
+
+If your editor can run `mdbrowse /path/to/the/current/file.md`, it works.
+
+## Styling
+
+Everything visual lives in `~/.config/mdbrowse/head.html`: a settings block at the top, the rules that use it, and the script that draws the bar and runs the reload loop. Colors and typography follow GitHub (Primer) by default. Edit that one file and every preview follows; values changed in the bar override them per browser.
+
+`sample.md` in this repository exercises headings, lists, task lists, quotes, code blocks, tables and links — render it to check your styling:
+
+```sh
+mdbrowse sample.md
+```
+
+## How it works
+
+```
+editor shortcut → mdbrowse <file> → pandoc → /tmp/mdbrowse.html
+                                             → /tmp/mdbrowse-stamp.js
+                                                      ↑
+                              browser polls the stamp, reloads only on change
+```
+
+Relative paths in the source file (images, links to neighbouring files) are rewritten to absolute `file://` URLs during conversion, so images show up even though the HTML lives in `/tmp`. Absolute paths, `http(s)`, `data:`, `mailto:` and in-page anchors are left alone.
+
+Each render also writes a one-line stamp file. The page polls that stamp instead of reloading blindly, so it refreshes only when you actually preview something new — no periodic flicker on pages with images. Polling pauses while you scroll, while you print, and while the pointer is on the bar. Image dimensions are remembered per session, so a refresh does not shift the layout while images load.
+
+The page is static, so nothing is listening and nothing needs to be shut down.
+
+## License
+
+MIT

package/assets/head.html

@@ -0,0 +1,295 @@
+<style>
+  /* ==== 設定 ===========================================================
+     GitHub（Primer）の配色とタイポグラフィに合わせてある。
+     ライト  bg #ffffff / canvas-subtle #f6f8fa / border #d1d9e0 / fg #1f2328
+             muted #59636e / link #0969da
+     ダーク  bg #0d1117 / canvas-subtle #151b23 / border #3d444d / fg #e6edf3
+             muted #9198a1 / link #4493f8
+     ==================================================================== */
+  :root {
+    color-scheme: light;
+
+    /* レイアウト（文字と行間は GitHub と同じ 16px / 1.5） */
+    --content-width: 800px;
+    --font-size: 16px;
+    --line-height: 1.5;
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+                   Helvetica, Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
+    --code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+    /* 色（ライト） */
+    --bg: #ffffff;
+    --surface: #f6f8fa;
+    --border: #d1d9e0;
+    --fg: #1f2328;
+    --muted: #59636e;
+    --link: #0969da;
+    --inline-code-bg: rgba(129, 139, 152, .12);
+
+    /* 右上のバー */
+    --bar-bg: #ffffff;
+    --bar-border: #d1d9e0;
+    --bar-shadow: 0 3px 8px rgba(31, 35, 40, .18), 0 1px 2px rgba(31, 35, 40, .12);
+  }
+
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --bg: #0d1117;        /* canvas-default */
+    --surface: #151b23;   /* canvas-subtle  */
+    --border: #3d444d;    /* border-default */
+    --fg: #f0f6fc;        /* fg-default     */
+    --muted: #9198a1;     /* fg-muted       */
+    --link: #4493f8;      /* accent-fg      */
+    --inline-code-bg: rgba(101, 108, 118, .2);
+
+    /* 右上のバー */
+    --bar-bg: #212830;    /* canvas-inset より一段明るい面 */
+    --bar-border: #3d444d;
+    --bar-shadow: 0 3px 8px rgba(1, 4, 9, .85), 0 1px 2px rgba(1, 4, 9, .6);
+  }
+  /* ==== ここから下は組み方 ============================================ */
+  html { background: var(--bg); }
+  body {
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 32px 32px 160px;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    font-family: var(--font-family);
+    color: var(--fg);
+    background: var(--bg);
+    word-wrap: break-word;
+  }
+  h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; margin: 24px 0 16px; }
+  h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
+  h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h1:first-child { margin-top: 0; }
+  p, ul, ol, blockquote, table, pre { margin: 0 0 16px; }
+  a { color: var(--link); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  code {
+    font-family: var(--code-font-family); font-size: 85%;
+    background: var(--inline-code-bg); padding: .2em .4em; border-radius: 6px;
+  }
+  pre {
+    background: var(--surface); padding: 16px; border-radius: 6px;
+    overflow-x: auto; font-size: 85%; line-height: 1.45;
+  }
+  pre code { background: none; padding: 0; font-size: 100%; }
+  blockquote {
+    padding: 0 1em; color: var(--muted);
+    border-left: .25em solid var(--border);
+  }
+  table { border-collapse: collapse; display: block; width: max-content; max-width: 100%; overflow: auto; }
+  th, td { border: 1px solid var(--border); padding: 6px 13px; text-align: left; }
+  th { font-weight: 600; }
+  tr:nth-child(2n) { background: var(--surface); }
+  img { max-width: 100%; }
+  hr { height: .25em; padding: 0; margin: 24px 0; background: var(--border); border: 0; }
+  ul, ol { padding-left: 2em; }
+  li + li { margin-top: .25em; }
+  li input[type="checkbox"] { margin: 0 .2em .25em -1.4em; vertical-align: middle; }
+
+  /* ==== 右上のバー ==================================================== */
+  #mdbar {
+    position: fixed; top: 16px; right: 16px; z-index: 10;
+    display: flex; align-items: center; gap: 2px;
+    padding: 4px; border-radius: 8px;
+    background: var(--bar-bg); color: var(--fg);
+    border: 1px solid var(--bar-border);
+    box-shadow: var(--bar-shadow);
+    font: 500 12px/1 var(--font-family);
+  }
+  #mdbar button {
+    all: unset; cursor: pointer; user-select: none;
+    padding: 6px 10px; border-radius: 6px; color: var(--fg);
+    font: inherit; min-width: 1.4em; text-align: center;
+  }
+  #mdbar button:hover { background: var(--surface); }
+  #mdbar button:active { background: var(--border); }
+  /* ==== 目次（右サイドバー） ========================================== */
+  #mdtoc {
+    position: fixed; top: 64px; right: 16px; z-index: 9;
+    width: 248px; max-height: calc(100vh - 96px); overflow-y: auto;
+    padding: 4px 0; font: 13.5px/1.7 var(--font-family); color: var(--muted);
+  }
+  #mdtoc a {
+    display: block; padding: 4px 10px; border-radius: 6px;
+    color: var(--muted); text-decoration: none;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  #mdtoc a:hover { background: var(--surface); color: var(--fg); text-decoration: none; }
+  #mdtoc a.is-current { background: var(--surface); color: var(--fg); font-weight: 600; }
+  #mdtoc a[data-level="3"] { padding-left: 22px; font-size: 12.5px; }
+  /* 目次は幅に関係なく出す。その分の余白をページ右に確保する */
+  html.has-toc { padding-right: 280px; }
+
+  /* ==== 印刷（PDF 保存） ============================================== */
+  @page { margin: 18mm; }
+  @media print {
+    #mdbar, #mdtoc { display: none; }
+    /* テーマに関係なく紙はライトで刷る */
+    :root, :root[data-theme="dark"] {
+      --bg: #ffffff; --surface: #f6f8fa; --border: #d1d9e0;
+      --fg: #1f2328; --muted: #59636e; --link: #0969da;
+      --inline-code-bg: rgba(129, 139, 152, .12);
+    }
+    html, body { background: #ffffff; color: #1f2328; }
+    body { max-width: none; padding: 0; font-size: 10.5pt; }
+    pre, blockquote, table, img, li { break-inside: avoid; }
+    h1, h2, h3, h4 { break-after: avoid; }
+    pre { white-space: pre-wrap; word-break: break-word; }
+  }
+</style>
+<script>
+  // 保存済みの設定を body 描画前に当てる（再読み込み時のちらつき防止）
+  (function () {
+    var s = {};
+    try { s = JSON.parse(localStorage.getItem('mdbrowse') || '{}'); } catch (e) {}
+    var r = document.documentElement;
+    r.dataset.theme = (s.theme === 'dark') ? 'dark' : 'light';
+    if (s.fontSize) r.style.setProperty('--font-size', s.fontSize + 'px');
+    if (s.width) r.style.setProperty('--content-width', s.width + 'px');
+    window.__mdSettings = s;
+  })();
+
+  addEventListener('DOMContentLoaded', function () {
+    var r = document.documentElement;
+    var s = window.__mdSettings || {};
+    var THEMES = ['light', 'dark'];
+    var WIDTHS = [800, 680, 960, 1200];
+    var paused = false;
+    var printing = false;
+    addEventListener('beforeprint', function () { printing = true; });
+    addEventListener('afterprint', function () { printing = false; });
+
+    function save() { try { localStorage.setItem('mdbrowse', JSON.stringify(s)); } catch (e) {} }
+    function fontSize() { return s.fontSize || parseInt(getComputedStyle(r).getPropertyValue('--font-size')) || 16; }
+
+    function applyToc() {
+      var el = document.getElementById('mdtoc');
+      var on = (s.toc !== false) && !!el;
+      if (el) el.style.display = on ? '' : 'none';
+      r.classList.toggle('has-toc', on);
+    }
+
+    var bar = document.createElement('div');
+    bar.id = 'mdbar';
+    bar.innerHTML =
+      '<button data-act="theme" title="テーマ"></button>' +
+      '<button data-act="dec" title="文字を小さく">A-</button>' +
+      '<button data-act="inc" title="文字を大きく">A+</button>' +
+      '<button data-act="width" title="本文の幅">&#8596;</button>' +
+      '<button data-act="toc" title="目次">&#9776;</button>';
+
+    function render() { bar.querySelector('[data-act=theme]').textContent = r.dataset.theme; }
+
+    bar.addEventListener('click', function (e) {
+      var act = e.target.dataset && e.target.dataset.act;
+      if (!act) return;
+      if (act === 'theme') {
+        s.theme = (r.dataset.theme === 'dark') ? 'light' : 'dark';
+        r.dataset.theme = s.theme;
+      } else if (act === 'inc' || act === 'dec') {
+        s.fontSize = Math.min(24, Math.max(12, fontSize() + (act === 'inc' ? 1 : -1)));
+        r.style.setProperty('--font-size', s.fontSize + 'px');
+      } else if (act === 'toc') {
+        s.toc = (s.toc === false);
+        applyToc();
+      } else if (act === 'width') {
+        var i = WIDTHS.indexOf(s.width || 780);
+        s.width = WIDTHS[(i + 1) % WIDTHS.length];
+        r.style.setProperty('--content-width', s.width + 'px');
+      }
+      save(); render();
+    });
+
+    // バーを操作している間は再読み込みを止める
+    bar.addEventListener('pointerenter', function () { paused = true; });
+    bar.addEventListener('pointerleave', function () { paused = false; });
+
+    document.body.appendChild(bar);
+    render();
+
+    // 目次（右サイドバー）。見出しが少ないファイルでは出さない
+    var heads = [].slice.call(document.querySelectorAll('h2[id], h3[id]'));
+    if (heads.length >= 3) {
+      var toc = document.createElement('nav');
+      toc.id = 'mdtoc';
+      var links = {};
+      heads.forEach(function (h) {
+        var a = document.createElement('a');
+        a.href = '#' + h.id;
+        a.textContent = h.textContent;
+        a.title = h.textContent;
+        a.dataset.level = (h.tagName === 'H3') ? '3' : '2';
+        a.addEventListener('click', function (e) {
+          e.preventDefault();
+          h.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+        toc.appendChild(a);
+        links[h.id] = a;
+      });
+      document.body.appendChild(toc);
+      applyToc();
+
+      // いま読んでいる見出しを目立たせる
+      var visible = [];
+      var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (en) {
+          var id = en.target.id;
+          var i = visible.indexOf(id);
+          if (en.isIntersecting) { if (i < 0) visible.push(id); }
+          else if (i >= 0) { visible.splice(i, 1); }
+        });
+        visible.sort(function (a, b) { return heads.findIndex(function (h) { return h.id === a; }) - heads.findIndex(function (h) { return h.id === b; }); });
+        var current = visible[0];
+        Object.keys(links).forEach(function (id) { links[id].classList.toggle('is-current', id === current); });
+      }, { rootMargin: '0px 0px -75% 0px' });
+      heads.forEach(function (h) { io.observe(h); });
+    }
+
+    // スクロール位置はブラウザ標準の復元に任せる（手で保存するとカクつく）
+    var lastScroll = 0;
+    addEventListener('scroll', function () { lastScroll = Date.now(); }, { passive: true });
+
+    // 画像の寸法を覚えておき、次の描画では読み込み前に場所を確保する（レイアウトシフト対策）
+    var dims = {};
+    try { dims = JSON.parse(sessionStorage.getItem('mdImgDims') || '{}'); } catch (e) {}
+    Array.prototype.forEach.call(document.images, function (img) {
+      var key = img.getAttribute('src');
+      var d = dims[key];
+      if (d) { img.style.aspectRatio = d.w + ' / ' + d.h; img.style.width = 'min(100%, ' + d.w + 'px)'; }
+      img.addEventListener('load', function () {
+        if (!img.naturalWidth) return;
+        dims[key] = { w: img.naturalWidth, h: img.naturalHeight };
+        try { sessionStorage.setItem('mdImgDims', JSON.stringify(dims)); } catch (e) {}
+      });
+    });
+
+    // 更新の判定。mdbrowse が書き出すスタンプを読み、変わったときだけ再読み込みする。
+    // 毎秒リロードすると画像が読み直されてちらつくため
+    var stampUrl = location.pathname.replace(/\.html$/, '-stamp.js');
+    var known = null;
+    function checkStamp() {
+      var el = document.createElement('script');
+      el.src = stampUrl + '?t=' + Date.now();
+      el.onload = function () {
+        el.remove();
+        var v = window.__mdbrowseStamp;
+        if (known === null) { known = v; return; }
+        if (v !== known) location.reload();
+      };
+      el.onerror = function () { el.remove(); };
+      document.head.appendChild(el);
+    }
+    checkStamp();
+    setInterval(function () {
+      if (paused || printing) return;
+      if (Date.now() - lastScroll < 900) return;
+      checkStamp();
+    }, 1000);
+  });
+</script>

package/bin/mdbrowse

@@ -0,0 +1,108 @@
+#!/usr/bin/env bash
+# mdbrowse — render a Markdown file to a fixed HTML path so the
+# browser tab can stay open and just swap its contents.
+set -euo pipefail
+
+VERSION="0.1.0"
+OUT="${MDBROWSE_OUT:-/tmp/mdbrowse.html}"
+CONFIG_DIR="${XDG_CONFIG_HOME:-$HOME/.config}/mdbrowse"
+
+# スタイルシートの探索順
+#   1. MDBROWSE_HEAD
+#   2. ユーザー設定 ~/.config/mdbrowse/head.html
+#   3. 同梱のもの（npm でインストールした場合はここが使われる）
+resolve_dir() {
+  local src="$1" dir
+  while [ -L "$src" ]; do
+    dir="$(cd -P "$(dirname "$src")" && pwd)"
+    src="$(readlink "$src")"
+    case "$src" in /*) ;; *) src="$dir/$src" ;; esac
+  done
+  (cd -P "$(dirname "$src")" && pwd)
+}
+BUNDLED_HEAD="$(resolve_dir "$0")/../assets/head.html"
+
+if [ -n "${MDBROWSE_HEAD:-}" ]; then
+  HEAD="$MDBROWSE_HEAD"
+elif [ -f "$CONFIG_DIR/head.html" ]; then
+  HEAD="$CONFIG_DIR/head.html"
+else
+  HEAD="$BUNDLED_HEAD"
+fi
+
+usage() {
+  cat <<'USAGE'
+mdbrowse — render Markdown to a fixed HTML file for browser preview
+
+Usage:
+  mdbrowse <file.md>   render the file (overwrites the output HTML)
+  mdbrowse --open      open the preview tab in the default browser
+  mdbrowse --eject     copy the bundled stylesheet into your config directory
+  mdbrowse --path      print the output HTML path
+  mdbrowse --version   print the version
+
+Environment:
+  MDBROWSE_OUT    output HTML path   (default: /tmp/mdbrowse.html)
+  MDBROWSE_HEAD   stylesheet/header  (default: $XDG_CONFIG_HOME/mdbrowse/head.html)
+
+Rendering also writes a stamp file next to the output. The page watches that
+stamp and reloads only when you render something new, so pointing the editor at
+a different file swaps the contents of the same tab instead of opening one.
+USAGE
+}
+
+open_url() {
+  if command -v open >/dev/null 2>&1; then open "file://$OUT"
+  elif command -v xdg-open >/dev/null 2>&1; then xdg-open "file://$OUT"
+  else echo "file://$OUT"
+  fi
+}
+
+case "${1:-}" in
+  -h|--help) usage; exit 0 ;;
+  -v|--version) echo "mdbrowse $VERSION"; exit 0 ;;
+  --path) echo "$OUT"; exit 0 ;;
+  --eject)
+    mkdir -p "$CONFIG_DIR"
+    if [ -f "$CONFIG_DIR/head.html" ] && [ "${2:-}" != "--force" ]; then
+      echo "mdbrowse: $CONFIG_DIR/head.html already exists (pass --force to overwrite)" >&2
+      exit 1
+    fi
+    cp "$BUNDLED_HEAD" "$CONFIG_DIR/head.html"
+    echo "$CONFIG_DIR/head.html"
+    exit 0 ;;
+  --open)
+    [ -f "$OUT" ] || printf '<!doctype html><meta charset="utf-8"><p>No preview yet.' > "$OUT"
+    [ -f "${OUT%.html}-stamp.js" ] || printf 'window.__mdbrowseStamp="0";\n' > "${OUT%.html}-stamp.js"
+    open_url; exit 0 ;;
+  "") usage; exit 2 ;;
+esac
+
+src="$1"
+
+if ! command -v pandoc >/dev/null 2>&1; then
+  echo "mdbrowse: pandoc not found. Install it first (macOS: brew install pandoc)" >&2
+  exit 127
+fi
+if [ ! -f "$src" ]; then
+  echo "mdbrowse: no such file: $src" >&2
+  exit 66
+fi
+
+args=(--standalone --from gfm --variable "pagetitle=$(basename "$src")" --output "$OUT")
+[ -f "$HEAD" ] && args+=(--include-in-header "$HEAD")
+
+pandoc "$src" "${args[@]}"
+
+# 出力先が /tmp なので、元ファイルからの相対パス（画像・ローカルリンク）が
+# そのままでは解決できない。ソースのあるディレクトリ基準の file:// に書き換える。
+# http(s) / data: / mailto: / 絶対パス / ページ内アンカーはそのまま残す
+src_dir="$(cd "$(dirname "$src")" && pwd)"
+sed -E \
+  -e 's#(src|href)="(https?://|data:|mailto:|file://|/|\#)#\1="@@KEEP@@\2#g' \
+  -e "s#(src|href)=\"#\1=\"file://$src_dir/#g" \
+  -e 's#(src|href)="file://[^"]*@@KEEP@@#\1="#g' \
+  "$OUT" > "$OUT.tmp" && mv "$OUT.tmp" "$OUT"
+
+# 更新の目印。ブラウザはこれを見て、中身が変わったときだけ読み直す
+printf 'window.__mdbrowseStamp="%s";\n' "$(date +%s)-$RANDOM" > "${OUT%.html}-stamp.js"

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@commte/mdbrowse",
+  "version": "0.1.0",
+  "description": "Preview the Markdown file you are editing in a real browser, with your own CSS, from any editor that can run a shell command. No server, no port.",
+  "bin": {
+    "mdbrowse": "bin/mdbrowse"
+  },
+  "files": [
+    "bin/mdbrowse",
+    "assets/head.html",
+    "sample.md",
+    "README.md",
+    "README.ja.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "markdown",
+    "preview",
+    "pandoc",
+    "editor",
+    "zed",
+    "neovim",
+    "cli"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/commte/mdbrowse.git"
+  },
+  "homepage": "https://github.com/commte/mdbrowse#readme",
+  "bugs": {
+    "url": "https://github.com/commte/mdbrowse/issues"
+  },
+  "author": "commte",
+  "license": "MIT",
+  "os": [
+    "darwin",
+    "linux"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sample.md

@@ -0,0 +1,97 @@
+# Markdown 記法サンプル
+
+このファイルは mdbrowse の表示確認用です。見出し、リスト、表、コードなど、日常的に使う記法をひと通り並べてあります。
+
+## 見出し
+
+見出しは `#` の数で階層になります。このページには h1 から h4 まで入っています。
+
+### 見出し 3
+
+#### 見出し 4
+
+## 段落と強調
+
+段落は空行で区切ります。文中の強調は **太字**、*斜体*、~~打ち消し~~、`インラインコード` が使えます。
+
+改行だけしたいときは、行末に空白を2つ置くか、`<br>` を入れます。
+
+## リスト
+
+箇条書きです。
+
+- 親の項目
+- ネストもできます
+  - 子の項目
+  - もう1つの子
+    - 孫の項目
+- 3つ目
+
+番号付きは数字で書きます。
+
+1. 最初の手順
+2. 次の手順
+3. 最後の手順
+
+タスクリストです。
+
+- [x] 完了した項目
+- [ ] まだの項目
+- [ ] 長めのテキストが入った項目。折り返しの見え方もここで確認できます
+
+## 引用
+
+> 引用ブロックです。返信の引用や、原文の一部を示すときに使います。
+>
+> 空行を挟めば段落を分けられます。
+
+## コード
+
+インラインは `mdbrowse sample.md` のように書きます。
+
+ブロックは3つのバッククォートで囲みます。言語名を書けます。
+
+```bash
+#!/usr/bin/env bash
+set -euo pipefail
+
+for f in *.md; do
+  mdbrowse "$f"
+done
+```
+
+```json
+{
+  "label": "Preview in browser",
+  "command": "mdbrowse",
+  "args": ["$ZED_FILE"]
+}
+```
+
+横に長い行は、はみ出さずにブロックの中でスクロールします。
+
+```
+pandoc input.md --standalone --from gfm --variable "pagetitle=input.md" --include-in-header head.html --output /tmp/mdbrowse.html
+```
+
+## 表
+
+| 項目 | 既定値 | 説明 |
+|---|---|---|
+| `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | 出力先の HTML |
+| `MDBROWSE_HEAD` | `~/.config/mdbrowse/head.html` | スタイルとリロード用スクリプト |
+| `--content-width` | `800px` | 本文の幅 |
+
+## リンク
+
+[通常のリンク](https://pandoc.org/) と、自動リンク https://github.com/ の見え方です。
+
+## 区切り線
+
+---
+
+## 長い本文
+
+日本語の本文が続いたときの行間と1行の文字数を見るための段落です。読みやすさは、文字サイズ、行間、本文幅の3つの組み合わせで決まります。右上のバーで文字サイズと幅を変えられるので、実際に切り替えながら好みの値を探せます。設定はブラウザに保存され、次に開いたときも維持されます。
+
+段落をもう1つ置きます。行送りが詰まりすぎていないか、逆に空きすぎて視線が迷わないかを、この2段落で確認できます。