@commte/mdbrowse 0.1.0 → 0.2.0

package/README.ja.md

@@ -2,22 +2,21 @@
 
 # mdbrowse
 
-編集中の Markdown を、自分の CSS でブラウザに表示する。シェルコマンドを実行できるエディタなら何でも使える
+編集中の Markdown を、自分の CSS でブラウザに表示する。エディタは何でもいい
 
-サーバーもポートも常駐プロセスも要らない。ショートカットを押すと現在のファイルが固定パスの HTML に変換され、開いたままのブラウザのタブがそれを拾う
+`mdb` を1回実行するとタブが開き、以後はどのプロジェクトのどの Markdown を保存しても、そのタブに出る。設定は要らない。サーバーもポートも無い
 
 ![ライトテーマ](docs/preview-light.png)
 
 ## 何のために作ったか
 
-エディタ内蔵のプレビューは、エディタの中で描画されるので見た目に手を入れられない。サーバーを立てるツールなら自由になるが、常駐とポートを引き受けることになる。これはどちらでもない。pandoc の上に乗せたシェルスクリプトと、スタイルを収めた HTML が1枚あるだけ
+エディタ内蔵のプレビューは、エディタの中で描画されるので見た目に手を入れられない。サーバーを立てるツールなら自由になるが、常駐とポートを引き受けることになる。これは pandoc の上に乗せたシェルスクリプトと、スタイルを収めた HTML が1枚あるだけで、固定パスに書き出してタブが自分で読み直す
 
 出力先が常に同じなので、ファイルを切り替えてもタブは増えない。すでに開いているタブの中身が入れ替わる
 
 ## 必要なもの
 
 - [pandoc](https://pandoc.org/) macOS は `brew install pandoc`、Debian/Ubuntu は `apt install pandoc`
-- 現在開いているファイルのパスを渡してシェルコマンドを実行できるエディタ
 
 ## インストール
 
@@ -25,6 +24,8 @@
 npm install -g @commte/mdbrowse
 ```
 
+コマンドは `mdb` と `mdbrowse` の2つの名前で入る。以下の例は短いほうで書く
+
 インストールせずに試す場合
 
 ```sh
@@ -34,7 +35,7 @@ npx @commte/mdbrowse file.md
 スタイルシートはパッケージに同梱されている。自分で編集したい場合は `~/.config/mdbrowse/head.html` に取り出す。以後はそちらが同梱版より優先される
 
 ```sh
-mdbrowse --eject
+mdb --eject
 ```
 
 <details>
@@ -46,28 +47,36 @@ cd mdbrowse
 ./install.sh
 ```
 
-`mdbrowse` が `~/.local/bin` に、スタイルシートが `~/.config/mdbrowse/head.html` に入る。再インストールしても自分で編集したスタイルシートは上書きされない。配布時の状態に戻したいときは `--force` を付ける
+`mdb`（と長いほうの `mdbrowse`）が `~/.local/bin` に、スタイルシートが `~/.config/mdbrowse/head.html` に入る。再インストールしても自分で編集したスタイルシートは上書きされない。配布時の状態に戻したいときは `--force` を付ける
 
 </details>
 
-プレビュー用のタブを1回だけ開いて、そのままにしておく
+あとは1回実行する
 
 ```sh
-mdbrowse --open
+mdb
 ```
 
+プレビュー用のタブが開き、小さな背景プロセスが動きだす。以後どの Markdown を保存しても、どのプロジェクトのものでも、そのタブに出る。止めるときは `mdb --stop`、再開はまた `mdb`
+
 ## 使い方
 
 ```sh
-mdbrowse file.md   # 変換する（出力 HTML を上書きする）
-mdbrowse --open    # プレビュー用のタブを開く
-mdbrowse --path    # 出力先の HTML のパスを表示する
+mdb              # タブを開いて、以後ずっと追従させる
+mdb --stop       # 背景の追従を止める
+mdb --status     # いま何が出ているかを表示する
+mdb file.md      # そのファイルを1回だけ変換する
+mdb -w file.md   # 1つのファイルだけを前面で監視する（Ctrl-C で終了）
+mdb --path       # 出力先の HTML のパスを表示する
 ```
 
-| 環境変数 | 既定値 | |
-|---|---|---|
-| `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | 出力先の HTML |
-| `MDBROWSE_HEAD` | `~/.config/mdbrowse/head.html` | スタイルとブラウザ側のスクリプト |
+### どうやって保存したファイルを見つけているか
+
+Spotlight（`mdfind`）に「直近に保存された Markdown」を尋ねて、それを変換している。ディスクを歩き回らないので軽い。隠しディレクトリ、`node_modules`、`~/Library` の下は無視する。Spotlight が使えない環境では、`mdb` を実行したディレクトリを見る動きに落ちる
+
+いま開いているファイルは毎秒そのまま見ているので、続けて保存したぶんはすぐ出る。別のファイルに移ったときだけ、Spotlight が気づくまで数秒かかる
+
+最後に保存されたものを追うので、別のプログラムが Markdown を書くとプレビューが持っていかれる。1つのファイルに固定したいときは `mdb -w そのファイル.md` を使う。指定したものだけを見て、`Ctrl-C` で止まる
 
 ## ページ内の操作
 
@@ -79,6 +88,8 @@ mdbrowse --path    # 出力先の HTML のパスを表示する
 
 ## エディタの設定
 
+`mdb` が保存を追いかけるので、以下は要らない。背景で何も動かさず、キーを押して出したい場合はこちらを設定する。どれも1回だけ変換する `mdb <file>` を呼んでいる
+
 ### Zed
 
 `install.sh` が `~/.config/zed/tasks.json` を作る。既存のファイルがある場合は上書きせず、貼り付ける内容を表示する。あとは `~/.config/zed/keymap.json` にキーを追加する
@@ -107,7 +118,7 @@ mdbrowse --path    # 出力先の HTML のパスを表示する
     {
       "label": "Preview in browser",
       "type": "shell",
-      "command": "mdbrowse",
+      "command": "mdb",
       "args": ["${file}"],
       "presentation": { "reveal": "never" },
       "problemMatcher": []
@@ -122,46 +133,48 @@ mdbrowse --path    # 出力先の HTML のパスを表示する
 
 ```lua
 vim.keymap.set("n", "<leader>mp", function()
-  vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") })
+  vim.fn.jobstart({ "mdb", vim.fn.expand("%:p") })
 end)
 
 -- 保存のたびに更新する場合
 vim.api.nvim_create_autocmd("BufWritePost", {
   pattern = "*.md",
-  callback = function() vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") }) end,
+  callback = function() vim.fn.jobstart({ "mdb", vim.fn.expand("%:p") }) end,
 })
 ```
 
 ### JetBrains 系
 
-設定 → ツール → 外部ツール で `mdbrowse` を追加し、引数に `$FilePath$` を指定する。Keymap でショートカットを割り当てる
+設定 → ツール → 外部ツール で `mdb` を追加し、引数に `$FilePath$` を指定する。Keymap でショートカットを割り当てる
 
 ### Emacs
 
 ```elisp
-(defun mdbrowse ()
+(defun mdb ()
   (interactive)
-  (start-process "mdbrowse" nil "mdbrowse" (buffer-file-name)))
+  (start-process "mdb" nil "mdb" (buffer-file-name)))
 ```
 
 ### それ以外
 
-`mdbrowse /path/to/current/file.md` を実行できるエディタなら動く
+`mdb /path/to/current/file.md` を実行できるエディタなら動く
 
 ## 見た目を変える
 
-見た目に関わるものは `~/.config/mdbrowse/head.html` に集まっている。先頭の設定ブロック、それを使う CSS、バーと更新検知のスクリプトという構成で、配色とタイポグラフィは GitHub（Primer）に合わせてある。このファイルを直せば全ファイルのプレビューに反映される。バーで変更した値は、その人のブラウザ側で既定値を上書きする
+コードブロックの色付けは [Shiki](https://shiki.style/) を使う。既定のテーマは `github-dark` で、`MDBROWSE_SHIKI_THEME` に `tokyo-night` などを入れれば変えられる。色付けは変換時に済ませるのでページは静的なまま。Node が無い環境では pandoc 内蔵の色付けに切り替わる
+
+それ以外の見た目に関わるものは `~/.config/mdbrowse/head.html` に集まっている。先頭の設定ブロック、それを使う CSS、バーと更新検知のスクリプトという構成で、配色とタイポグラフィは GitHub（Primer）に合わせてある。このファイルを直せば全ファイルのプレビューに反映される。バーで変更した値は、その人のブラウザ側で既定値を上書きする
 
 表示確認用に `sample.md` が入っている
 
 ```sh
-mdbrowse sample.md
+mdb sample.md
 ```
 
 ## 仕組み
 
 ```
-エディタのショートカット → mdbrowse <file> → pandoc → /tmp/mdbrowse.html
+ファイルを保存 → mdb（またはエディタのショートカット） → pandoc → /tmp/mdbrowse.html
                                                       → /tmp/mdbrowse-stamp.js
                                                               ↑
                                        ブラウザがスタンプを見て、変化したときだけ再読み込み
@@ -169,7 +182,11 @@ mdbrowse sample.md
 
 変換のたびに1行のスタンプファイルも書き出す。ブラウザは無条件に再読み込みせず、このスタンプを見て、新しく変換されたときだけ読み直す。画像のあるページで定期的にちらつかないのはこのため。スクロール中と印刷中、バーを操作している間はスタンプの確認を止める。画像の寸法はセッションに記憶して、読み込み中にレイアウトがずれないようにしている
 
-元ファイルからの相対パス（画像や隣のファイルへのリンク）は、変換時に絶対 `file://` へ書き換える。HTML が `/tmp` にあっても画像が表示されるのはこのため。絶対パス、`http(s)`、`data:`、`mailto:`、ページ内アンカーはそのまま残す
+YAML の frontmatter は本文に出さない。ファイル側の `title` が本文の先頭に見出しとして増えることはない
+
+元ファイルからの相対パス（画像や隣のファイルへのリンク）は、変換時に絶対 `file://` へ書き換える。HTML が `/tmp` にあっても画像が表示されるのはこのため。書き換えるのは `img` や `a` などタグの属性だけなので、本文に `src="foo.png"` と書いても表示はそのまま。絶対パス、スキーム付きのもの（`http(s)`、`data:`、`mailto:` など）、`//` 始まり、ページ内アンカーには触らない。パスに `&` や `#`、空白が入っていても壊れない
+
+監視は同じ変換を繰り返しているだけ。背景プロセスは、開いているファイルの更新時刻とサイズを1秒ごとに、直近に保存された Markdown を2秒ごとに見て、変わったら変換し直す。待ち受けるものは無くポートも持たない。`mdb --stop` で終わり、`ps` に見えるシェルのプロセスが1つあるだけ
 
 ページは静的なので、待ち受けているものは何も無く、終了させる必要もない
 

package/README.md

@@ -2,22 +2,21 @@ 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.
+Preview the Markdown file you are editing in a real browser, with your own CSS, from any editor.
 
-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.
+Run `mdb` once. It opens a tab, and from then on whatever Markdown file you save — in any project, from any editor — appears in it. No configuration, no server, no port.
 
 ![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.
+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 is a shell script on top of `pandoc` plus one HTML file holding the styles: it renders to a fixed path and the tab reloads itself.
 
 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
 
@@ -25,6 +24,8 @@ Because the output path never changes, switching between files does not open new
 npm install -g @commte/mdbrowse
 ```
 
+That gives you the command under two names, `mdb` and `mdbrowse`. The examples below use the short one.
+
 Or without installing anything:
 
 ```sh
@@ -34,7 +35,7 @@ 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
+mdb --eject
 ```
 
 <details>
@@ -46,28 +47,36 @@ 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.
+This installs `mdb` (and the longer `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:
+Then run it once:
 
 ```sh
-mdbrowse --open
+mdb
 ```
 
+That opens the preview tab and starts a small background process. Save any Markdown file from here on and it shows up in that tab, whichever project it lives in. `mdb --stop` ends it; `mdb` starts it again.
+
 ## Usage
 
 ```sh
-mdbrowse file.md   # render (overwrites the output HTML)
-mdbrowse --open    # open the preview tab
-mdbrowse --path    # print the output HTML path
+mdb              # open the tab and keep it in sync
+mdb --stop       # stop the background sync
+mdb --status     # show what is being previewed
+mdb file.md      # render one file, once
+mdb -w file.md   # follow one file in the foreground (Ctrl-C to stop)
+mdb --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 |
+### How the sync finds your file
+
+It asks Spotlight (`mdfind`) which Markdown file was saved most recently, twice a second-and-a-bit, and renders that one. Walking your disk is never involved, so it stays cheap. Files under hidden directories, `node_modules` and `~/Library` are ignored. Without Spotlight it falls back to watching the directory you started `mdb` in.
+
+The file you are editing right now is checked every second directly, so repeated saves show up immediately; moving to a different file takes a couple of seconds longer, while Spotlight notices it.
+
+Because it follows whatever was saved last, another program writing a Markdown file can pull the preview away. If you want the tab pinned to one file, run `mdb -w that-file.md` instead — that watches only what you name, and stops when you press `Ctrl-C`.
 
 ## In-page controls
 
@@ -79,6 +88,8 @@ The table of contents is built from the headings of the current file and follows
 
 ## Editor setup
 
+None of this is needed — `mdb` already follows what you save. Set one of these up if you would rather press a key and have nothing running in the background. They all call `mdb <file>`, the render-once mode.
+
 ### 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`:
@@ -107,7 +118,7 @@ Two things worth knowing:
     {
       "label": "Preview in browser",
       "type": "shell",
-      "command": "mdbrowse",
+      "command": "mdb",
       "args": ["${file}"],
       "presentation": { "reveal": "never" },
       "problemMatcher": []
@@ -122,55 +133,59 @@ Bind it in `keybindings.json` with `workbench.action.tasks.runTask`.
 
 ```lua
 vim.keymap.set("n", "<leader>mp", function()
-  vim.fn.jobstart({ "mdbrowse", vim.fn.expand("%:p") })
+  vim.fn.jobstart({ "mdb", 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,
+  callback = function() vim.fn.jobstart({ "mdb", vim.fn.expand("%:p") }) end,
 })
 ```
 
 ### JetBrains IDEs
 
-Settings → Tools → External Tools → add `mdbrowse` with `$FilePath$` as the argument, then assign a shortcut under Keymap.
+Settings → Tools → External Tools → add `mdb` with `$FilePath$` as the argument, then assign a shortcut under Keymap.
 
 ### Emacs
 
 ```elisp
-(defun mdbrowse ()
+(defun mdb ()
   (interactive)
-  (start-process "mdbrowse" nil "mdbrowse" (buffer-file-name)))
+  (start-process "mdb" nil "mdb" (buffer-file-name)))
 ```
 
 ### Anything else
 
-If your editor can run `mdbrowse /path/to/the/current/file.md`, it works.
+If your editor can run `mdb /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.
+Code blocks are highlighted with [Shiki](https://shiki.style/) (`github-dark` by default; set `MDBROWSE_SHIKI_THEME` to any bundled theme, e.g. `tokyo-night`). Highlighting happens at conversion time, so the page stays static. Without Node available it falls back to pandoc's built-in highlighting.
+
+Everything else 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
+mdb sample.md
 ```
 
 ## How it works
 
 ```
-editor shortcut → mdbrowse <file> → pandoc → /tmp/mdbrowse.html
+save a file → mdb (or an editor shortcut) → 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.
+YAML front matter is consumed rather than printed: the file's own `title` does not become a second heading above your document. 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`. Only attributes of tags such as `img` and `a` are touched, so `src="foo.png"` written in your prose stays as you typed it. Absolute paths, anything with a scheme (`http(s)`, `data:`, `mailto:`), protocol-relative URLs and in-page anchors are left alone, and `&`, `#` or spaces in the path do not break the result.
 
 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.
 
+Watching is the same render in a loop. The background process compares the file's timestamp and size once a second, asks Spotlight for the newest Markdown file every other second, and renders again when either changes. It listens on nothing and has no port; `mdb --stop` ends it, and it is a single shell process you can see in `ps`.
+
 The page is static, so nothing is listening and nothing needs to be shut down.
 
 ## License

package/assets/head.html

@@ -25,6 +25,8 @@
     --muted: #59636e;
     --link: #0969da;
     --inline-code-bg: rgba(129, 139, 152, .12);
+    --code-bg: #0d1117;   /* コードブロックはテーマに関係なく暗い面 */
+    --code-fg: #e6edf3;
 
     /* 右上のバー */
     --bar-bg: #ffffff;
@@ -41,6 +43,8 @@
     --muted: #9198a1;     /* fg-muted       */
     --link: #4493f8;      /* accent-fg      */
     --inline-code-bg: rgba(101, 108, 118, .2);
+    --code-bg: #0d1117;
+    --code-fg: #e6edf3;
 
     /* 右上のバー */
     --bar-bg: #212830;    /* canvas-inset より一段明るい面 */
@@ -61,8 +65,15 @@
     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); }
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  /* 線を引くのは、その文書でいちばん浅い2階層（JS が付ける）。
+     節の切れ目が分かるように、上に大きめの余白を取る */
+  .mdrule {
+    margin-top: 80px; padding-bottom: .3em;
+    border-bottom: 1px solid var(--border);
+  }
+  body > :first-child, .mdrule:first-child { margin-top: 0; }
   h3 { font-size: 1.25em; }
   h4 { font-size: 1em; }
   h1:first-child { margin-top: 0; }
@@ -73,11 +84,15 @@
     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;
+  /* pandoc 側の .sourceCode より優先度を上げて、コードブロックを暗い面に統一する */
+  pre, pre.sourceCode, div.sourceCode {
+    background: var(--code-bg); color: var(--code-fg);
+    padding: 16px; border-radius: 6px;
     overflow-x: auto; font-size: 85%; line-height: 1.45;
   }
-  pre code { background: none; padding: 0; font-size: 100%; }
+  div.sourceCode { padding: 0; }
+  div.sourceCode > pre { margin: 0; font-size: 100%; }
+  pre code, pre > code.sourceCode { background: transparent; padding: 0; color: inherit; font-size: 100%; }
   blockquote {
     padding: 0 1em; color: var(--muted);
     border-left: .25em solid var(--border);
@@ -122,7 +137,7 @@
   }
   #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; }
+  #mdtoc a[data-level="2"] { padding-left: 22px; font-size: 12.5px; }
   /* 目次は幅に関係なく出す。その分の余白をページ右に確保する */
   html.has-toc { padding-right: 280px; }
 
@@ -130,6 +145,8 @@
   @page { margin: 18mm; }
   @media print {
     #mdbar, #mdtoc { display: none; }
+    /* 目次のために空けている右の余白は、紙では要らない */
+    html.has-toc { padding-right: 0; }
     /* テーマに関係なく紙はライトで刷る */
     :root, :root[data-theme="dark"] {
       --bg: #ffffff; --surface: #f6f8fa; --border: #d1d9e0;
@@ -141,6 +158,12 @@
     pre, blockquote, table, img, li { break-inside: avoid; }
     h1, h2, h3, h4 { break-after: avoid; }
     pre { white-space: pre-wrap; word-break: break-word; }
+    /* Shiki は暗い背景前提の色を要素に直接持つので、紙では黒字に戻す */
+    pre.shiki, pre.shiki span, pre code, pre code span {
+      background: transparent !important;
+      color: #1f2328 !important;
+    }
+    pre { border: 1px solid #d1d9e0; }
   }
 </style>
 <script>
@@ -160,7 +183,6 @@
     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; });
@@ -193,38 +215,58 @@
         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)));
+        s.fontSize = Math.min(24, Math.max(16, 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);
+        var i = WIDTHS.indexOf(s.width || WIDTHS[0]);
         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]'));
+    // その文書でいちばん浅い2階層の見出しに線を引く
+    var allHeads = [].slice.call(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+    if (allHeads.length) {
+      var lvOf = function (h) { return +h.tagName.slice(1); };
+      var shallow = Math.min.apply(null, allHeads.map(lvOf));
+      allHeads.forEach(function (h) {
+        if (lvOf(h) <= shallow + 1) h.classList.add('mdrule');
+      });
+    }
+
+    // 見出しのレベルは文書によって違う（h2 起点とは限らない）。
+    // 拾えた中でいちばん浅いレベルを基準にして、その1つ下までを目次に出す
+    var heads = [].slice.call(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'));
+    if (heads.length) {
+      var lv = function (h) { return +h.tagName.slice(1); };
+      var top = Math.min.apply(null, heads.map(lv));
+      // 最上位が1つだけなら文書のタイトル。目次には出さず、その下を基準にする
+      if (heads.filter(function (h) { return lv(h) === top; }).length === 1) {
+        heads = heads.filter(function (h) { return lv(h) > top; });
+        if (heads.length) top = Math.min.apply(null, heads.map(lv));
+      }
+      heads = heads.filter(function (h) { return lv(h) <= top + 1; });
+    }
     if (heads.length >= 3) {
+      var topLevel = Math.min.apply(null, heads.map(function (h) { return +h.tagName.slice(1); }));
       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';
+        var label = h.textContent.replace(/\s+/g, ' ').trim();
+        a.textContent = label;
+        a.title = label;
+        a.dataset.level = (+h.tagName.slice(1) === topLevel) ? '1' : '2';
         a.addEventListener('click', function (e) {
           e.preventDefault();
           h.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -286,8 +328,13 @@
       document.head.appendChild(el);
     }
     checkStamp();
+    // 背面タブではタイマーが大幅に間引かれるので、表示に戻った時点で必ず確認する
+    addEventListener('visibilitychange', function () { if (!document.hidden) checkStamp(); });
+    addEventListener('focus', function () { checkStamp(); });
+    // バーを操作している間は再読み込みを止める。状態を持たずにその場で見る
+    // （持つと、バーの上にポインタを置いたままウィンドウを離れたときに止まったままになる）
     setInterval(function () {
-      if (paused || printing) return;
+      if (printing || bar.matches(':hover')) return;
       if (Date.now() - lastScroll < 900) return;
       checkStamp();
     }, 1000);

package/bin/mdbrowse

@@ -3,7 +3,8 @@
 # browser tab can stay open and just swap its contents.
 set -euo pipefail
 
-VERSION="0.1.0"
+VERSION="0.2.0"
+PROG="$(basename "$0")"
 OUT="${MDBROWSE_OUT:-/tmp/mdbrowse.html}"
 CONFIG_DIR="${XDG_CONFIG_HOME:-$HOME/.config}/mdbrowse"
 
@@ -32,14 +33,27 @@ fi
 
 usage() {
   cat <<'USAGE'
-mdbrowse — render Markdown to a fixed HTML file for browser preview
+mdb — 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
+  mdb                    open the preview tab and keep it in sync from then on
+  mdb <file.md>          render that file once
+  mdb --stop             stop the background sync
+  mdb --status           show what is being previewed
+  mdb -w <file|dir>      watch in the foreground instead (Ctrl-C to stop)
+  mdb --eject            copy the bundled stylesheet into your config directory
+  mdb --path             print the output HTML path
+  mdb --version          print the version
+
+With no arguments, mdb opens the preview tab and starts a small background
+process. From then on, whatever Markdown file you save — in any project, from
+any editor — shows up in that tab. Nothing else to set up. `mdb --stop` ends it.
+
+Finding the file you just saved uses Spotlight (mdfind). Files under hidden
+directories, node_modules and ~/Library are ignored. Without Spotlight, mdb
+falls back to watching the directory you started it in.
+
+The same command is also installed under its full name, `mdbrowse`.
 
 Environment:
   MDBROWSE_OUT    output HTML path   (default: /tmp/mdbrowse.html)
@@ -58,51 +72,272 @@ open_url() {
   fi
 }
 
+open_tab() {
+  [ -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
+}
+
+PIDFILE="${OUT%.html}-sync.pid"
+
+running_pid() {
+  [ -f "$PIDFILE" ] || return 1
+  local pid; pid="$(cat "$PIDFILE" 2>/dev/null)"
+  [ -n "$pid" ] || return 1
+  kill -0 "$pid" 2>/dev/null || return 1
+  echo "$pid"
+}
+
+stop_sync() {
+  local pid
+  if pid="$(running_pid)"; then
+    kill "$pid" 2>/dev/null || true
+    rm -f "$PIDFILE"
+    echo "$PROG: stopped"
+  else
+    rm -f "$PIDFILE"
+    echo "$PROG: not running"
+  fi
+}
+
+start_sync() {
+  if running_pid >/dev/null; then
+    echo "$PROG: already in sync (mdb --stop to end it)"
+    return 0
+  fi
+  nohup "$0" --sync-daemon "$PWD" >/dev/null 2>&1 &
+  echo $! > "$PIDFILE"
+  echo "$PROG: in sync — save any .md and it shows up here (mdb --stop to end it)"
+}
+
 case "${1:-}" in
   -h|--help) usage; exit 0 ;;
   -v|--version) echo "mdbrowse $VERSION"; exit 0 ;;
   --path) echo "$OUT"; exit 0 ;;
+  --stop) stop_sync; exit 0 ;;
+  --status)
+    if running_pid >/dev/null; then
+      echo "$PROG: in sync (pid $(running_pid))"
+    else
+      echo "$PROG: not running"
+    fi
+    [ -f "$OUT" ] && echo "showing: $(grep -o '<title>[^<]*' "$OUT" 2>/dev/null | sed 's/<title>//')"
+    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
+      echo "$PROG: $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"
+# 残りは「オプション＋ファイル」
+watch=0
+do_open=0
+daemon=0
+sync_cwd=""
+src=""
+while [ $# -gt 0 ]; do
+  case "$1" in
+    -w|--watch) watch=1 ;;
+    -o|--open) do_open=1 ;;
+    --sync-daemon) daemon=1; shift; sync_cwd="${1:-$PWD}" ;;
+    --) shift; [ $# -gt 0 ] && src="$1"; break ;;
+    -*) echo "$PROG: unknown option: $1" >&2; exit 2 ;;
+    *) src="$1" ;;
+  esac
+  shift
+done
+
+# 引数なし（または --open だけ）が既定の使い方。タブを開いて、以後は勝手に追従する
+if [ -z "$src" ] && [ "$watch" -eq 0 ] && [ "$daemon" -eq 0 ]; then
+  if ! command -v pandoc >/dev/null 2>&1; then
+    echo "$PROG: pandoc not found. Install it first (macOS: brew install pandoc)" >&2
+    exit 127
+  fi
+  open_tab
+  start_sync
+  exit 0
+fi
+
+# -w だけならカレントディレクトリを見る
+[ -z "$src" ] && [ "$watch" -eq 1 ] && src="."
 
 if ! command -v pandoc >/dev/null 2>&1; then
-  echo "mdbrowse: pandoc not found. Install it first (macOS: brew install pandoc)" >&2
+  echo "$PROG: 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
+root=""
+if [ "$daemon" -eq 1 ]; then
+  :
+elif [ -d "$src" ]; then
+  if [ "$watch" -eq 0 ]; then
+    echo "$PROG: $src is a directory (pass -w to watch it)" >&2
+    exit 2
+  fi
+  root="$src"
+elif [ ! -f "$src" ]; then
+  echo "$PROG: 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")
+# コードの色付けは Shiki（node がある場合）。無ければ pandoc 内蔵の skylighting
+SELF_DIR="$(resolve_dir "$0")"
+HIGHLIGHTER="$SELF_DIR/../lib/highlight.mjs"
+use_shiki=0
+if command -v node >/dev/null 2>&1 && [ -f "$HIGHLIGHTER" ]; then
+  use_shiki=1
+fi
+
+# シンタックスハイライトの指定は pandoc 3.9 で名前が変わった
+pv="$(pandoc --version | head -1 | awk '{print $2}')"
+if [ "$(printf '%s\n3.9\n' "$pv" | sort -V | head -1)" = "3.9" ]; then
+  if [ "$use_shiki" -eq 1 ]; then hl=(--syntax-highlighting none); else hl=(--syntax-highlighting breezedark); fi
+else
+  if [ "$use_shiki" -eq 1 ]; then hl=(--no-highlight); else hl=(--highlight-style breezedark); fi
+fi
+
+render() {
+  local args=(--standalone --from gfm "${hl[@]}" --variable "pagetitle=$(basename "$src")" --output "$OUT")
+  [ -f "$HEAD" ] && args+=(--include-in-header "$HEAD")
+
+  pandoc "$src" "${args[@]}"
+
+  # コードブロックを Shiki で色付けし直す。失敗しても変換自体は成立させる
+  if [ "$use_shiki" -eq 1 ]; then
+    node "$HIGHLIGHTER" "$OUT" || true
+  fi
+
+  # frontmatter の title を pandoc が拾うと本文の先頭に見出しが増えるので落とす。
+  # ブラウザのタブ名には pagetitle を使っている
+  perl -0pi -e 's#<header id="title-block-header">.*?</header>\n?##s' "$OUT"
+
+  # 出力先が /tmp なので、元ファイルからの相対パス（画像・ローカルリンク）が
+  # そのままでは解決できない。ソースのあるディレクトリ基準の file:// に書き換える。
+  # 書き換えるのはタグの属性だけ。本文中の src="..." のようなインラインコードは触らない。
+  # スキーム付き（http(s) data: mailto: など）／絶対パス／ページ内アンカーはそのまま残す
+  local src_dir="$(cd "$(dirname "$src")" && pwd)"
+  MDBROWSE_SRC_DIR="$src_dir" perl -0pi -e '
+  BEGIN {
+    $base = $ENV{MDBROWSE_SRC_DIR};
+    # file:// の中で意味を持つ文字は先に逃がす（% は必ず最初）
+    $base =~ s/%/%25/g;
+    $base =~ s/#/%23/g;
+    $base =~ s/\?/%3F/g;
+    $base =~ s/ /%20/g;
+  }
+  s{(<(?:img|a|source|video|audio|embed|object|track)\b)([^>]*?)(/?>)}{
+    my ($tag, $attrs, $close) = ($1, $2, $3);
+    $attrs =~ s{((?:src|href|poster|data)=")(?![a-zA-Z][a-zA-Z0-9+.\-]*:|//|/|\#|")([^"]*)"}
+               {$1 . "file://" . $base . "/" . $2 . "\""}ge;
+    $tag . $attrs . $close;
+  }gse;
+' "$OUT"
+
+  # 更新の目印。ブラウザはこれを見て、中身が変わったときだけ読み直す
+  printf 'window.__mdbrowseStamp="%s";\n' "$(date +%s)-$RANDOM" > "${OUT%.html}-stamp.js"
+}
+
+# ファイルの更新時刻とサイズ。同じ秒内の2回目の保存も拾えるようにサイズも見る
+if stat -f %m . >/dev/null 2>&1; then
+  fingerprint() { stat -f '%m %z' "$1" 2>/dev/null; }
+  stat_time_name() { xargs -0 stat -f '%m %N' 2>/dev/null; }
+else
+  fingerprint() { stat -c '%Y %s' "$1" 2>/dev/null; }
+  stat_time_name() { xargs -0 stat -c '%Y %n' 2>/dev/null; }
+fi
+
+# ディレクトリの中でいちばん最近保存された Markdown
+newest_md() {
+  find "$1" \( -name .git -o -name node_modules -o -name .venv \) -prune \
+       -o -type f -name '*.md' -print0 2>/dev/null \
+    | stat_time_name | sort -rn | head -1 | cut -d' ' -f2-
+}
 
-pandoc "$src" "${args[@]}"
+# Spotlight で「家じゅうで直近に保存された Markdown」を引く。木を歩かないので速い
+newest_global() {
+  mdfind 'kMDItemFSName == "*.md"c && kMDItemContentModificationDate >= $time.now(-1800)' 2>/dev/null \
+    | grep -v -e '/\.' -e '/node_modules/' -e '/Library/' \
+    | tr '\n' '\0' | stat_time_name | sort -rn | head -1 | cut -d' ' -f2-
+}
+
+# 背景で動く本体。保存された Markdown を追いかけて変換し続ける
+if [ "$daemon" -eq 1 ]; then
+  trap 'rm -f "$PIDFILE"' EXIT
+  use_spotlight=0
+  command -v mdfind >/dev/null 2>&1 && use_spotlight=1
+  [ "$use_spotlight" -eq 0 ] && root="$sync_cwd"
 
-# 出力先が /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"
+  pick() {
+    if [ "$use_spotlight" -eq 1 ]; then newest_global; else newest_md "$root"; fi
+  }
 
-# 更新の目印。ブラウザはこれを見て、中身が変わったときだけ読み直す
-printf 'window.__mdbrowseStamp="%s";\n' "$(date +%s)-$RANDOM" > "${OUT%.html}-stamp.js"
+  src="$(pick)"
+  if [ -n "$src" ] && [ -f "$src" ]; then render || true; fi
+  last="$src $(fingerprint "$src") $(fingerprint "$HEAD")"
+  # 開いているファイルの保存は毎秒見る。別ファイルへの切り替えの検出は2秒ごと
+  tick=0
+  while sleep 1; do
+    tick=$(( tick + 1 ))
+    if [ $(( tick % 2 )) -eq 0 ]; then
+      cand="$(pick)"
+      [ -n "$cand" ] && src="$cand"
+    fi
+    [ -f "$src" ] || continue
+    now="$src $(fingerprint "$src") $(fingerprint "$HEAD")"
+    [ "$now" = "$last" ] && continue
+    last="$now"
+    render || true
+  done
+  exit 0
+fi
+
+if [ -n "$root" ]; then
+  src="$(newest_md "$root")"
+  if [ -z "$src" ]; then
+    echo "$PROG: no Markdown file under $root" >&2
+    exit 66
+  fi
+fi
+
+[ "$do_open" -eq 1 ] && open_tab
+
+render
+
+# 監視。保存のたびに変換し直す。スタイルシートを直したときも作り直す
+if [ "$watch" -eq 1 ]; then
+  # ディレクトリを見る場合、木が大きいと走査が重い。1回の走査時間から
+  # 待ち時間を決めて、CPU を食い潰さないようにする
+  interval=1
+  if [ -n "$root" ]; then
+    t0="$(perl -MTime::HiRes=time -e 'printf "%d", time*1000')"
+    newest_md "$root" >/dev/null
+    t1="$(perl -MTime::HiRes=time -e 'printf "%d", time*1000')"
+    scan=$(( t1 - t0 ))
+    interval=$(( (scan * 5 + 999) / 1000 ))
+    [ "$interval" -lt 1 ] && interval=1
+    [ "$interval" -gt 10 ] && interval=10
+    if [ "$interval" -gt 1 ]; then
+      echo "$PROG: watching $root — save any .md under it (checking every ${interval}s; a smaller directory reacts faster) (Ctrl-C to stop)" >&2
+    else
+      echo "$PROG: watching $root — save any .md under it (Ctrl-C to stop)" >&2
+    fi
+  else
+    echo "$PROG: watching $src (Ctrl-C to stop)" >&2
+  fi
+  last="$src $(fingerprint "$src") $(fingerprint "$HEAD")"
+  while sleep "$interval"; do
+    if [ -n "$root" ]; then
+      cand="$(newest_md "$root")"
+      [ -n "$cand" ] && src="$cand"
+    fi
+    now="$src $(fingerprint "$src") $(fingerprint "$HEAD")"
+    [ "$now" = "$last" ] && continue
+    last="$now"
+    [ -f "$src" ] || continue
+    render || echo "$PROG: render failed" >&2
+  done
+fi

package/lib/highlight.mjs

@@ -0,0 +1,37 @@
+// pandoc が出したプレーンなコードブロックを Shiki で色付けし直す。
+// 変換時に静的な HTML にするので、ブラウザ側で JS は動かない
+import { readFile, writeFile } from 'node:fs/promises'
+
+const THEME = process.env.MDBROWSE_SHIKI_THEME || 'github-dark'
+const file = process.argv[2]
+if (!file) process.exit(0)
+
+const unescape = (s) =>
+  s.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+   .replace(/&quot;/g, '"').replace(/&#39;/g, "'")
+   .replace(/&amp;/g, '&')
+
+const html = await readFile(file, 'utf8')
+const blocks = [...html.matchAll(/<pre(?: class="([^"]*)")?><code(?: class="[^"]*")?>([\s\S]*?)<\/code><\/pre>/g)]
+if (!blocks.length) process.exit(0)
+
+const { createHighlighter, bundledLanguages } = await import('shiki')
+
+const langOf = (cls) => {
+  const first = (cls || '').split(/\s+/).filter(Boolean)[0]
+  if (!first) return 'text'
+  const name = first.replace(/^language-/, '').toLowerCase()
+  return name in bundledLanguages ? name : 'text'
+}
+
+const langs = [...new Set(blocks.map((m) => langOf(m[1])))].filter((l) => l !== 'text')
+const highlighter = await createHighlighter({ themes: [THEME], langs })
+
+let out = html
+for (const m of blocks) {
+  const lang = langOf(m[1])
+  const code = unescape(m[2])
+  const rendered = highlighter.codeToHtml(code, { lang, theme: THEME })
+  out = out.replace(m[0], rendered)
+}
+await writeFile(file, out)

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@commte/mdbrowse",
-  "version": "0.1.0",
+  "version": "0.2.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"
+    "mdbrowse": "bin/mdbrowse",
+    "mdb": "bin/mdbrowse"
   },
   "files": [
     "bin/mdbrowse",
+    "lib/highlight.mjs",
     "assets/head.html",
     "sample.md",
     "README.md",
@@ -38,5 +40,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "shiki": "^4.4.3"
   }
 }