动手：Markdown 实时编辑器

你要做什么

一个分屏 Markdown 编辑器，左边写右边实时看到渲染效果。

⏱️ 15 分钟 | 🛠️ Vue 3 + marked

跟着做

帮我做一个 Markdown 编辑器（Vue 3）：
1. 安装 marked：npm install marked
2. 左右分屏布局：左边 textarea，右边实时渲染预览
3. 左边输入 Markdown，右边即时更新 HTML
4. 支持标题、加粗、列表、链接、代码块等基础语法
5. 顶部工具栏：加粗、斜体、标题、链接快捷按钮
6. 暗色编辑器风格，预览区白底
7. 有一个"复制 HTML"按钮

核心实现

import { marked } from 'marked';
const html = computed(() => marked(markdown.value));

一行代码就把 Markdown 转成了 HTML。marked 库帮你做了所有的解析工作。

🎯 进阶挑战

• 加上文件导入/导出（.md 文件）
• 支持 GitHub Flavored Markdown（表格、任务列表）
• 加上自动保存到 localStorage

✅ 你做到了

• 学会了使用第三方 Markdown 解析库
• 理解了分屏编辑器的实现
• 做了一个实用工具