Markdown 实时预览器：左边写右边看，排版效率翻倍

本案例用华为云 CodeArts 码道 WebUI 作为开发入口：在浏览器里打开码道对话窗口，用自然语言描述需求， 码道直接生成一个单文件 index.html 的 Markdown 实时预览器，左侧输入 Markdown，右侧实时渲染 HTML， 支持表格、代码高亮、列表、图片链接，工具栏一键插入加粗、斜体、标题、链接，深色主题护眼又好看， 不依赖任何外部 CDN，单文件即开即用。不用装 CLI、不用配 AK/SK，全程浏览器搞定，内置部署还能给出公网预览链接。 源码和截图全部开源在文末 Demo Park。

写 Markdown 最烦什么

Markdown 是技术写作的标配——写文档、记笔记、发博客、做 README，都离不开它。语法简单、纯文本、版本可控，但痛点也很明显：

• 写的时候看不到效果，## 是不是多了一个 #、表格列有没有对齐、代码块语言标对没有，全靠脑补，发布后才发现排版错乱。
• 用 Typora 这类编辑器要装软件，用在线工具又怕粘贴敏感内容、网络不稳，还经常带广告和弹窗。
• 想要代码高亮、表格渲染、深色主题，很多轻量预览器不支持，或者依赖一堆 CDN，断网就废了。

最理想的方式是：左边写右边看——左边输入 Markdown，右侧实时渲染成 HTML，敲一个字符右侧立刻更新，工具栏一键插入常用格式，代码高亮、表格、列表、图片链接全都支持，深色主题长时间写不累。这种工具自己写也不难，但要从零做一个体验好的——实时解析、语法高亮、工具栏快捷按钮、深色配色、单文件零依赖——还是需要花点功夫的。

这次用码道 WebUI，一句话需求就生成了完整的单文件应用。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后即可使用码道的 AI 编程能力，自然语言描述需求，自动生成代码并部署。

三种使用方式

码道提供三种使用方式，覆盖不同开发场景：

• WebUI（浏览器对话）：在 AI 开发者空间里打开码道对话窗口，用自然语言描述需求，码道自动创建项目、编写代码、启动部署。全程浏览器操作，零安装，最适合快速原型和 Demo 开发。本文用这种方式演示。
• TUI（终端命令行）：在本地终端里运行 codearts 命令进入交互界面，适合需要本地文件系统操作、命令行工具开发的场景。
• 桌面 IDE（IDE 插件）：在 CodeArts IDE 里安装码道插件，边写代码边让 AI 补全、重构，适合正式项目开发。

进入 AI 开发者空间的步骤：

1. 浏览器打开 https://developer.huaweicloud.com/devspace/
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入主界面后，左侧菜单栏找到 CodeArts，点击右侧的浏览器图标，弹出码道 WebUI 对话窗口，底部输入框提示「尽管吩咐，我来帮你搞定」。

小贴士：体验版沙箱 3 小时后自动重置，关键内容记得及时保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个 Markdown 实时预览器网页：左侧为 Markdown 输入区，右侧为 HTML 实时渲染预览区，输入即实时渲染。支持表格、代码高亮、有序无序列表、图片和链接渲染。顶部工具栏有加粗、斜体、标题、链接等快捷插入按钮。深色主题界面美观，不依赖外部 CDN，单个 HTML 文件即开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

需求发出后，左侧「任务」计数 +1，码道开始自动拆解任务、创建项目、编写代码。

开发过程

码道接收到需求后，自动完成了以下工作，整个过程约几分钟：

• 创建项目目录 /workspace/css-animation-lab（复用了之前的目录名，实际内容是 Markdown 预览器）
• 生成单文件 index.html，共 516 行，包含 Markdown 解析、实时渲染、语法高亮、工具栏快捷按钮、深色主题等完整逻辑，零外部 CDN 依赖
• 启动 python3 -m http.server 部署 HTTP 服务
• curl 自检确认页面可访问

完成后码道输出任务摘要，包含内部预览访问地址和功能清单。打开预览链接即可使用工具。

功能解析

生成的 Markdown 实时预览器是一个纯前端单文件应用，所有解析和渲染逻辑在 index.html 的