I tried creating a writing environment where pressing ⌘⌥Z in VS Code lets you view Markdown in Zenn preview

⌘⌥Z (VS Code keybinding)
  │
  ▼
Mini VS Code extension (zennPreview.open command)
  │ Save the open file → Run sync script → Open Simple Browser
  ▼
Sync script zenn-preview.sh
  │ ① Convert and copy Markdown to ~/zenn-content/articles/preview-current.md
  │ ② Start zenn preview server (localhost:8000)
  │ ③ Resident daemon monitors file saves and keeps syncing
  ▼
Zenn CLI Preview Server
  └ http://localhost:8000/articles/preview-current

mkdir ~/zenn-content && cd ~/zenn-content
npm init -y
npm install zenn-cli
npx zenn init

npx zenn preview

👀 Preview: http://localhost:8000

~/blog/my-article/              ← Articles can be placed anywhere
├── my-article.md               ← The article being written (source file; never modified)
└── screenshot.png              ← Image referenced from the article with a relative path

~/zenn-content/                 ← Zenn CLI's preview directory
├── zenn-preview.sh             ← This script
├── articles/
│   └── preview-current.md      ← Converted copy of the article (overwritten each time)
└── images/
    └── preview → ~/blog/my-article/   ← Symlink to the article folder

/tmp/
├── zenn-preview.pid            ← Process ID of the resident daemon
└── zenn-preview.target         ← Path of the article currently being tracked

#!/bin/bash
# Location: ~/zenn-content/zenn-preview.sh
# Continuously syncs the specified Markdown to the Zenn preview folder (~/zenn-content)
# Usage: zenn-preview.sh <path to md file>
set -u

ZENN_DIR="$HOME/zenn-content"
SLUG="preview-current"
DEST="$ZENN_DIR/articles/$SLUG.md"
PIDFILE="/tmp/zenn-preview.pid"
TARGETFILE="/tmp/zenn-preview.target"
URL="http://localhost:8000/articles/$SLUG"

# Convert frontmatter to Zenn format and sync
sync_file() {
  python3 - "$SRC" "$DEST" <<'PYEOF'
import json, os, re, sys

src, dest = sys.argv[1], sys.argv[2]
text = open(src, encoding="utf-8").read()

# Make local images displayable in preview:
# Symlink the directory containing the article to ~/zenn-content/images/preview,
# and rewrite relative-path image references to /images/preview/... (original file is not modified)
src_dir = os.path.dirname(os.path.abspath(src))
img_root = os.path.join(os.path.expanduser("~"), "zenn-content", "images")
os.makedirs(img_root, exist_ok=True)
link = os.path.join(img_root, "preview")
if os.path.islink(link):
    os.remove(link)
if not os.path.exists(link):
    os.symlink(src_dir, link)

def _rewrite_img(m):
    alt, path = m.group(1), m.group(2)
    if re.match(r"^(https?://|/|data:)", path):
        return m.group(0)
    return f"![{alt}](/images/preview/{path})"

# Parse frontmatter
meta, body = {}, text
if text.startswith("---"):
    parts = text.split("---", 2)
    if len(parts) == 3:
        body = parts[2].lstrip("\n")
        for line in parts[1].strip().splitlines():
            if ":" not in line:
                continue
            k, v = line.split(":", 1)
            k, v = k.strip(), v.strip()
            try:
                meta[k] = json.loads(v)
            except Exception:
                meta[k] = v.strip("\"'")

body = re.sub(r"!\[([^\]]*)\]\(([^)\s]+?)(?:\s+\"[^\"]*\")?\)", _rewrite_img, body)

title = meta.get("title")
if not title:
    m = re.search(r"^#{1,2} (.+)$", body, re.M)
    title = (m.group(1) if m else "Untitled")[:80]
emoji = str(meta.get("emoji") or "📝")
topics = []
for t in meta.get("tags") or []:
    t = re.sub(r"[^a-z0-9]", "", str(t).lower())
    if t:
        topics.append(t)
topics = topics[:5]
if not topics:
    # Insert a placeholder because Zenn preview shows a warning if topics is empty
    topics = ["preview"]

fm = (
    "---\n"
    f"title: {json.dumps(title, ensure_ascii=False)}\n"
    f"emoji: \"{emoji}\"\n"
    "type: \"tech\"\n"
    f"topics: {json.dumps(topics)}\n"
    "published: false\n"
    "---\n\n"
)
open(dest, "w", encoding="utf-8").write(fm + body)
PYEOF
}

# Start the preview server (localhost:8000) if it is not running
ensure_server() {
  if ! curl -s -o /dev/null --max-time 2 http://localhost:8000; then
    (cd "$ZENN_DIR" && nohup npx zenn preview >/tmp/zenn-preview.log 2>&1 &)
    for _ in $(seq 1 20); do
      curl -s -o /dev/null --max-time 1 http://localhost:8000 && break
      sleep 0.5
    done
  fi
}

# --daemon: The monitoring daemon body (monitors saves of the specified file and keeps syncing)
if [ "${1:-}" = "--daemon" ]; then
  trap '' HUP
  if [ -f "$PIDFILE" ]; then
    old=$(cat "$PIDFILE")
    [ "$old" != "$$" ] && kill "$old" 2>/dev/null
  fi
  echo $$ > "$PIDFILE"
  ensure_server
  last_key=""
  tick=0
  while true; do
    sleep 1
    # Check server health every 15 seconds and auto-recover if it has stopped
    tick=$(( (tick + 1) % 15 ))
    [ "$tick" = "0" ] && ensure_server
    # Exit if this process is no longer the official daemon (self-resolving double-start)
    [ "$(cat "$PIDFILE" 2>/dev/null)" = "$$" ] || exit 0
    # Target: the most recently explicitly specified file
    f=$(cat "$TARGETFILE" 2>/dev/null)
    [ -n "$f" ] && [ -f "$f" ] || continue
    key="$f:$(stat -f %m "$f" 2>/dev/null)"
    if [ "$key" != "$last_key" ]; then
      last_key="$key"
      SRC="$f" sync_file
    fi
  done
fi

# Normal startup: sync the specified file and start the daemon if absent
SRC="${1:-}"
ensure_server
if [ -z "$SRC" ] || [ ! -f "$SRC" ]; then
  SRC=$(cat "$TARGETFILE" 2>/dev/null)
fi
if [ -n "$SRC" ] && [ -f "$SRC" ]; then
  echo "$SRC" > "$TARGETFILE"
  sync_file
fi
# Start the daemon if it is not running
if [ ! -f "$PIDFILE" ] || ! kill -0 "$(cat "$PIDFILE")" 2>/dev/null; then
  nohup "$0" --daemon >/dev/null 2>&1 &
fi
echo "Preview: $URL"

chmod +x ~/zenn-content/zenn-preview.sh
~/zenn-content/zenn-preview.sh ~/path/to/your-article.md

Preview: http://localhost:8000/articles/preview-current

{
    "name": "markdown-zenn-preview",
    "displayName": "Markdown Zenn Preview",
    "description": "Display the open Markdown in Simple Browser via Zenn preview",
    "publisher": "local",
    "version": "1.0.0",
    "engines": {
        "vscode": "^1.80.0"
    },
    "capabilities": {
        "untrustedWorkspaces": {
            "supported": true
        }
    },
    "main": "./extension.js",
    "contributes": {
        "commands": [
            {
                "command": "zennPreview.open",
                "title": "Markdown: Open Zenn Preview"
            }
        ]
    }
}

const vscode = require("vscode");
const cp = require("child_process");
const util = require("util");

const execFile = util.promisify(cp.execFile);
const SCRIPT = `${process.env.HOME}/zenn-content/zenn-preview.sh`;
const PREVIEW_URL = "http://localhost:8000/articles/preview-current";

function activate(context) {
    context.subscriptions.push(
        vscode.commands.registerCommand("zennPreview.open", async () => {
            const editor = vscode.window.activeTextEditor;
            let file = "";
            if (editor && editor.document.uri.scheme === "file") {
                // If there are unsaved changes, save first then make it the preview target
                if (editor.document.isDirty) {
                    await editor.document.save();
                }
                file = editor.document.uri.fsPath;
            }
            // Since the script waits until the server has fully started before exiting,
            // we wait for completion before opening the browser (to prevent connection refused errors)
            try {
                await execFile("/bin/bash", file ? [SCRIPT, file] : [SCRIPT], { timeout: 30000 });
            } catch (err) {
                vscode.window.showErrorMessage(`Zenn preview sync failed: ${err.message}`);
            }
            await vscode.commands.executeCommand(
                "simpleBrowser.api.open",
                vscode.Uri.parse(PREVIEW_URL),
                { viewColumn: vscode.ViewColumn.Beside, preserveFocus: true }
            );
        })
    );
}

function deactivate() {}

module.exports = { activate, deactivate };

[
    {
        "key": "cmd+alt+z",
        "command": "zennPreview.open"
    }
]