实时 Markdown 预览器:实时 AI 配对编辑预览 - Openclaw Skills

作者:互联网

2026-03-26

AI教程

什么是 实时 Markdown 预览器?

实时 Markdown 预览器是一个专门设计的实用工具,旨在弥合 AI 生成内容与视觉反馈之间的差距。作为 Openclaw Skills 生态系统的强大补充,它允许开发人员和 AI 代理在任何 Web 浏览器中通过即时的、基于 SSE 的实时重载来协作处理 Markdown 文件。该工具采用纯 Node.js 构建,零外部依赖,确保了安全、极速的体验,且无供应链风险或网络暴露。

该工具对于复杂的文档任务特别有价值,其中视觉层次、图表和格式至关重要。通过将其集成到您的 Openclaw Skills 设置中,您可以创建一个紧密的反馈循环,AI 代理所做的每一次更改都立即可见,从而在无需手动刷新浏览器的情况下确保准确性和风格一致性。

下载入口:https://github.com/openclaw/skills/tree/main/skills/parkertoddbrooks/markdown-viewer

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install markdown-viewer

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 /skills/

优先级:工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 markdown-viewer。如果尚未安装 Clawhub,请先安装(npm i -g clawhub)。

Install

实时 Markdown 预览器 应用场景

  • 实时预览 AI 生成的 README 文件、技术文档和项目维基。
  • 与 AI 代理进行协作式配对编辑,在此过程中需要对复杂表格或任务列表进行视觉确认。
  • 在 Openclaw Skills 工作流生成 Mermaid 图表和 KaTeX 数学公式时立即进行审查。
  • 将文件访问限制在特定的项目目录中,以便在共享或受限环境中进行安全的本地查看。
实时 Markdown 预览器 工作原理
  1. 安装全局 npm 软件包,使 mdview 命令在您的 Openclaw Skills 环境中可用。
  2. 初始化严格绑定到 127.0.0.1 的本地服务器,以确保您的文件永远不会暴露在网络中。
  3. 指示 AI 代理通过默认浏览器中预览器 URL 查询参数打开特定的本地文件路径。
  4. 保存对 .md 文件的更改,并观察浏览器如何使用服务器发送事件 (SSE) 立即重新渲染内容。

实时 Markdown 预览器 配置指南

要开始使用,请使用 npm 全局安装预览器:

npm install -g @wipcomputer/markdown-viewer

然后您可以启动服务器,并使用以下命令将其集成到您的 Openclaw Skills 自动化脚本中:

curl -s http://127.0.0.1:3000/ > /dev/null 2>&1 || mdview &

实时 Markdown 预览器 数据架构与分类体系

组件 技术规范
本地服务器 默认为 http://127.0.0.1:3000
数据访问 通过 path 查询参数直接读取文件系统
格式支持 GitHub Flavored Markdown (GFM), Mermaid, KaTeX
安全性 --root 标志允许限制目录树
刷新逻辑 为 Safari, Chrome 和 Firefox 提供基于 SSE 的实时重载
name: markdown-viewer
description: Live markdown viewer for AI pair-editing. When you collaborate, the updates render instantly. Works with any AI agent and web browser.
homepage: https://github.com/wipcomputer/wip-markdown-viewer
metadata:
  {
    "openclaw":
      {
        "emoji": "??",
        "requires": { "bins": ["node", "curl"] },
        "install":
          [
            {
              "id": "npm",
              "kind": "npm",
              "package": "@wipcomputer/markdown-viewer",
              "global": true,
              "bins": ["mdview"],
              "label": "Install markdown-viewer (npm)",
            },
          ],
      },
  }

Live Markdown Viewer

Live markdown viewer for AI pair-editing. When you collaborate, the updates render instantly. Works with any AI agent and web browser.

GitHub: wipcomputer/wip-markdown-viewer npm: @wipcomputer/markdown-viewer

Install

npm install -g @wipcomputer/markdown-viewer

This installs the mdview command globally. Zero runtime dependencies. Pure Node.js.

Quick start

Start the server (binds to 127.0.0.1 only, never exposed to the network):

curl -s http://127.0.0.1:3000/ > /dev/null 2>&1 || mdview &

Open a file in your default browser:

# macOS
open "http://127.0.0.1:3000/view?path=/absolute/path/to/file.md"

# Linux
xdg-open "http://127.0.0.1:3000/view?path=/absolute/path/to/file.md"

# Windows
start "http://127.0.0.1:3000/view?path=/absolute/path/to/file.md"

How it works

  1. Tell your AI coding tool to install @wipcomputer/markdown-viewer globally
  2. Tell your AI to open a .md file in md view
  3. AI opens the file in your default browser
  4. Every save re-renders the page instantly. No refresh needed.

Open multiple tabs to work on multiple documents at once.

Security

  • Server binds to 127.0.0.1 only. It is not accessible from other machines.
  • The /view?path= parameter reads files from your local filesystem. Use --root to restrict access to a specific directory tree. Recommended for shared environments.
  • Zero npm dependencies. No supply chain risk beyond Node.js itself.

Features

  • SSE-powered live reload (works in Safari, Chrome, Firefox)
  • Multi-file support (each tab watches its own file)
  • GitHub Flavored Markdown (tables, task lists, strikethrough)
  • Syntax highlighting (180+ languages)
  • Dark mode
  • Table of contents
  • Mermaid diagrams
  • KaTeX math equations

Troubleshooting

Page shows the index instead of my file: The server was started with --root restricting access. Restart without --root.

Safari stalls or shows blank page: Hard refresh (Cmd+Shift+R) or restart the server. Safari caches SSE connections aggressively.

macOS open drops the query string: Use AppleScript instead:

osascript -e 'tell application "Safari" to open location "http://127.0.0.1:3000/view?path=/your/file.md"'

Notes

  • Server runs at http://127.0.0.1:3000 by default. Use mdview --port 8080 to change.
  • The server does not survive reboots. The curl check in quick start restarts it if needed.
  • Do NOT start the server with a file path argument. Always start bare (mdview). Starting with a path locks the server to that directory.
  • Drag and drop any .md file onto the homepage to view it.
  • Zero external requests. All dependencies bundled locally.