本案例用华为云 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 开发者空间的步骤：
- 浏览器打开 https://developer.huaweicloud.com/devspace/
- 弹窗「请选择要进入的版本」→ 点击 体验版
- 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
- 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建
进入主界面后，左侧菜单栏找到 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 的
1. 实时预览
左侧输入 Markdown，右侧立刻渲染成 HTML，敲一个字符右侧就更新：
- Markdown 输入框内容变化时，自动重新解析并渲染
- 输入即预览，无需点击任何按钮，排版效果实时可见
- 左右分栏布局，输入和预览并排对照，所见即所得
2. 表格渲染
Markdown 表格语法自动解析成 HTML
，列宽自适应：
- 支持对齐标记（:---、:---:、---:）控制左对齐、居中、右对齐
- 表头加粗区分，边框和内边距美观
- 复杂表格也能正确渲染
3. 代码高亮
代码块和行内代码都有专门的样式处理：
- 代码块（三反引号包裹）带独立背景色和等宽字体
- 支持标注语言类型（如 `js ）
- 行内代码（单反引号）用不同底色标注，与正文区分清晰
4. 列表渲染
有序列表和无序列表都完整支持：
- 无序列表（-、*、+）渲染为圆点项目符号
- 有序列表（1.）自动编号
- 嵌套列表缩进对齐，层次清晰
5. 图片与链接
Markdown 图片和链接语法正确渲染：
- 图片
渲染为 标签，自适应宽度 - 链接 text 渲染为可点击的超链接
- 自动识别 URL，渲染为可点击链接
6. 工具栏快捷按钮
顶部工具栏提供常用格式的快捷插入，不用手敲语法：
点击按钮即可插入对应 Markdown 语法，选中文本时自动包裹，大幅提升写作效率。
7. 深色主题
界面采用深色主题，长时间写作不刺眼：
- 深色背景 + 高对比度文字，护眼舒适
- 代码块、表格、工具栏各区域视觉层次分明
- 输入区和预览区背景略有区分，一眼分得清哪里写、哪里看
8. 零外部依赖
整个应用是真正的单文件，不依赖任何外部 CDN：
- Markdown 解析逻辑全部内置在
运行效果
实际验证：打开页面后左侧输入 Markdown 文本（标题、加粗、列表、表格、代码块混合内容），右侧立刻渲染出排版好的 HTML；点工具栏「加粗」按钮，选中的文字自动包裹 **，右侧实时更新为加粗效果；输入一个 Markdown 表格，右侧秒级渲染成对齐整齐的表格；粘贴一段代码块，右侧立即显示带高亮底色的代码区域。整个过程输入即响应，无需任何手动触发，深色主题长时间使用不累眼。
直接试玩
这个工具已经完整开源（源代码、本文档、全部截图），托管在 Demo Park 仓库：
- Demo Park 仓库：https://atomgit.com/deli007/demo_park
- 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-markdown-preview
打开上面的链接，进入 codearts-markdown-preview 文件夹，把 index.html 下载到本地，浏览器打开即可使用。左侧输入任意 Markdown，右侧立刻看到渲染效果，点工具栏按钮快速插入格式，无需安装任何依赖。
总结
一次需求生成一个能用的 Markdown 实时预览器，从实时渲染、表格代码高亮、列表图片链接到工具栏快捷按钮和深色主题，全部由码道 WebUI 完成，516 行代码零外部依赖。不需要自己写解析逻辑、配 CDN，只要把功能和交互说清楚，码道就交付了一个体验完整的工具。而且自带部署，内置预览链接打开即用，不需要自己配服务器。
WebUI 的优势在于零安装零配置：浏览器打开码道对话窗口，输入自然语言需求，代码生成、项目创建、HTTP 部署一条龙完成。对于这种单文件工具类应用，从想法到可运行的产品只需要一句话。想体验这种从自然语言直接到可运行工具的流程，免费开通码道体验版：
https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz