@commte/mdbrowse 0.1.0 → 0.1.1

package/README.ja.md

@@ -25,6 +25,8 @@
 npm install -g @commte/mdbrowse
 ```
 
+コマンドは `mdb` と `mdbrowse` の2つの名前で入る。以下の例は短いほうで書く
+
 インストールせずに試す場合
 
 ```sh
@@ -34,7 +36,7 @@ npx @commte/mdbrowse file.md
 スタイルシートはパッケージに同梱されている。自分で編集したい場合は `~/.config/mdbrowse/head.html` に取り出す。以後はそちらが同梱版より優先される
 
 ```sh
-mdbrowse --eject
+mdb --eject
 ```
 
 <details>
@@ -46,24 +48,28 @@ cd mdbrowse
 ./install.sh
 ```
 
-`mdbrowse` が `~/.local/bin` に、スタイルシートが `~/.config/mdbrowse/head.html` に入る。再インストールしても自分で編集したスタイルシートは上書きされない。配布時の状態に戻したいときは `--force` を付ける
+`mdb`（と長いほうの `mdbrowse`）が `~/.local/bin` に、スタイルシートが `~/.config/mdbrowse/head.html` に入る。再インストールしても自分で編集したスタイルシートは上書きされない。配布時の状態に戻したいときは `--force` を付ける
 
 </details>
 
 プレビュー用のタブを1回だけ開いて、そのままにしておく
 
 ```sh
-mdbrowse --open
+mdb --open
 ```
 
+必要なのは最初の1回だけ。以後は変換するたびに、そのタブの中身が入れ替わる。開き直すのは、タブを閉じたときとブラウザを再起動したときだけ
+
 ## 使い方
 
 ```sh
-mdbrowse file.md   # 変換する（出力 HTML を上書きする）
-mdbrowse --open    # プレビュー用のタブを開く
-mdbrowse --path    # 出力先の HTML のパスを表示する
+mdb file.md   # 変換する（出力 HTML を上書きする）
+mdb --open    # プレビュー用のタブを開く
+mdb --path    # 出力先の HTML のパスを表示する
 ```
 
+ファイルの監視はしない。保存しただけでは何も起きず、`mdb <file>` が走ったときにタブが切り替わる。エディタ側でキーに割り当てるか、保存時に走らせる
+
 | 環境変数 | 既定値 | |
 |---|---|---|
 | `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | 出力先の HTML |
@@ -107,7 +113,7 @@ mdbrowse --path    # 出力先の HTML のパスを表示する
     {
       "label": "Preview in browser",
       "type": "shell",
-      "command": "mdbrowse",
+      "command": "mdb",
       "args": ["${file}"],
       "presentation": { "reveal": "never" },
       "problemMatcher": []
@@ -122,46 +128,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 <file> → pandoc → /tmp/mdbrowse.html
                                                       → /tmp/mdbrowse-stamp.js
                                                               ↑
                                        ブラウザがスタンプを見て、変化したときだけ再読み込み
@@ -169,7 +177,9 @@ 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:` など）、`//` 始まり、ページ内アンカーには触らない。パスに `&` や `#`、空白が入っていても壊れない
 
 ページは静的なので、待ち受けているものは何も無く、終了させる必要もない
 

package/README.md

@@ -25,6 +25,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 +36,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,24 +48,28 @@ 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:
 
 ```sh
-mdbrowse --open
+mdb --open
 ```
 
+Once is enough: from then on every render swaps the contents of that tab. You only open it again after closing the tab or restarting the browser.
+
 ## Usage
 
 ```sh
-mdbrowse file.md   # render (overwrites the output HTML)
-mdbrowse --open    # open the preview tab
-mdbrowse --path    # print the output HTML path
+mdb file.md   # render (overwrites the output HTML)
+mdb --open    # open the preview tab
+mdb --path    # print the output HTML path
 ```
 
+Nothing watches the filesystem. Saving a file does not update the preview by itself — the tab changes when `mdb <file>` runs, so bind it to a key or to save in your editor.
+
 | Variable | Default | |
 |---|---|---|
 | `MDBROWSE_OUT` | `/tmp/mdbrowse.html` | output HTML path |
@@ -107,7 +113,7 @@ Two things worth knowing:
     {
       "label": "Preview in browser",
       "type": "shell",
-      "command": "mdbrowse",
+      "command": "mdb",
       "args": ["${file}"],
       "presentation": { "reveal": "never" },
       "problemMatcher": []
@@ -122,52 +128,54 @@ 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
+editor shortcut → mdb <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.
+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.
 

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.1.1"
+PROG="$(basename "$0")"
 OUT="${MDBROWSE_OUT:-/tmp/mdbrowse.html}"
 CONFIG_DIR="${XDG_CONFIG_HOME:-$HOME/.config}/mdbrowse"
 
@@ -32,14 +33,16 @@ 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 <file.md>   render the file (overwrites the output HTML)
+  mdb --open      open the preview tab in the default browser
+  mdb --eject     copy the bundled stylesheet into your config directory
+  mdb --path      print the output HTML path
+  mdb --version   print the version
+
+The same command is also installed under its full name, `mdbrowse`.
 
 Environment:
   MDBROWSE_OUT    output HTML path   (default: /tmp/mdbrowse.html)
@@ -65,7 +68,7 @@ case "${1:-}" in
   --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"
@@ -81,28 +84,65 @@ 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
+  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
+  echo "$PROG: no such file: $src" >&2
   exit 66
 fi
 
-args=(--standalone --from gfm --variable "pagetitle=$(basename "$src")" --output "$OUT")
+# コードの色付けは 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
+
+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:// に書き換える。
-# http(s) / data: / mailto: / 絶対パス / ページ内アンカーはそのまま残す
+# 書き換えるのはタグの属性だけ。本文中の src="..." のようなインラインコードは触らない。
+# スキーム付き（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"
+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"

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.1.1",
   "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"
   }
 }