▋
platform/md-share/SKILL.md

name: md-share description: >- Produce a standalone, shareable HTML snapshot of a markdown doc using md-preview's UI (pan/zoom mermaid diagrams, TOC, fullscreen). Use when the user wants to share a markdown doc with their team while preserving the md-preview look, export md-preview to a single HTML file, send a rendered doc to Slack/email, or make a markdown doc viewable offline.

md-share

Turn a local markdown doc (rendered by md-preview) into a single self-contained HTML file that preserves the custom UI — sticky header, TOC, code copy buttons, and (most importantly) the pan/zoom/fullscreen mermaid viewports.

When to use this

The user wants to hand a teammate a rendered doc that looks like what they see in md-preview, but via email/Slack/a file drop — no running local server required.

How to run

Invoke the bundled script with the markdown file path:

~/.claude/skills/md-share/share.sh <path/to/doc.md> [output.html]
  • If output.html is omitted, it writes <doc>.shareable.html next to the source.
  • Stdout prints the final output path.
  • Script is idempotent — it starts its own md-preview on a free port and tears it down on exit.

Report the final path to the user (the user wants to know where the file landed).

What the script does (and why)

md-preview renders markdown client-side by fetching /source and /meta from its server on page load, then binds pan/zoom handlers on the rendered mermaid SVGs. A naive snapshot breaks:

  1. monolith / plain "Save As" fails — it only inlines static resources, not runtime fetch() responses. The saved file tries to refetch from a dead server.
  2. single-file with defaults fails — default flags strip scripts (loses pan/zoom), strip hidden elements (loses the fullscreen modal), and strip "unused" styles (loses .fullscreen-modal.open { display:flex } because nothing had .open at capture time).

So the script runs single-file with:

  • --block-scripts=false → keep md-preview's client JS so PanZoom/toolbar/fullscreen classes survive.
  • --remove-hidden-elements=false → keep the #fullscreen modal div (display:none at capture).
  • --remove-unused-styles=false → keep .fullscreen-modal.open and other conditional rules.

Then it post-processes the HTML:

  • Replaces the live-reload boot (refresh(true).then(...)) with an offline activator that calls attachCodeCopy, activateDiagrams, buildToc directly on the already-rendered DOM (the SVGs are baked in).
  • Hides .status-row so the "Live preview" / "Rendered at …" pills don't show on a static file.

Prerequisites

  • md-preview on PATH — it is the md-preview skill's Node script; that skill covers linking it into ~/.local/bin.
  • single-file-cli on PATH — install once with npm i -g single-file-cli.

If either is missing, the script exits with a clear message.

Troubleshooting

  • "warn: live-reload boot not found" — md-preview's boot code changed shape. Re-read its refresh(true).then(...) block and update the regex in share.sh.
  • Mermaid diagrams render but don't pan/zoom — scripts were blocked; confirm --block-scripts=false.
  • Fullscreen button does nothing — the #fullscreen modal or its .open style rule was stripped; confirm --remove-hidden-elements=false and --remove-unused-styles=false.
  • Diagram off-center in fullscreen — the .diagram wrapper needs height in fullscreen: grep md-preview for .fullscreen-modal .fullscreen-body and confirm display:flex there plus .diagram { flex:1; min-height:0 }.