Markdown 转 HTML 工具实现说明

概述

我已经在 VitePress 项目中成功创建了一个 Markdown 转 HTML 的工具页面。该工具基于开源库 marked 实现，提供了与参考网站类似的功能。

实现细节

1. 技术栈

• VitePress - 静态站点生成器
• Vue 3 - 前端框架
• marked - Markdown 转 HTML 核心库
• TypeScript - 类型安全支持

2. 文件结构

docs/
├── .vitepress/
│   ├── components/
│   │   └── MarkdownToHtml.vue  # 核心转换组件
│   └── theme/
│       └── index.ts           # 注册全局组件
└── markdown-to-html/
    ├── index.md              # 主页面
    ├── usage.md              # 使用说明
    └── README.md             # 本文档

3. 核心功能

已实现功能

• ✅ 实时 Markdown 转 HTML
• ✅ 手动转换模式
• ✅ GFM（GitHub Flavored Markdown）支持
• ✅ 一键复制转换结果
• ✅ 一键下载 .html 文件
• ✅ 插入示例功能
• ✅ 清空内容功能
• ✅ 错误提示
• ✅ 响应式设计
• ✅ 暗色模式支持

界面特性

• 左右分栏布局（Markdown 输入 | HTML 输出）
• 现代化的 UI 设计
• 平滑的动画效果
• Toast 提示消息
• 移动端适配

4. 使用方法

1. 访问 /markdown-to-html/ 页面
2. 在左侧输入 Markdown 代码
3. 右侧自动显示转换后的 HTML
4. 点击复制或下载按钮保存结果

5. 依赖配置

在 package.json 中已添加：

{
  "dependencies": {
    "marked": "^16.2.1"
  }
}

6. 注意事项

1. 转换完全在浏览器端进行，无需服务器
2. 支持所有常见的 Markdown 元素
3. 特殊的 Markdown 结构可能需要手动调整
4. 建议在项目根目录运行 pnpm install 安装依赖

后续优化建议

1. 添加更多转换选项（如标题样式、列表符号等）
2. 支持自定义 CSS 样式
3. 添加更多 Markdown 扩展语法支持
4. 支持批量转换功能
5. 添加转换历史记录

技术细节

marked 库配置

marked.setOptions({
  gfm: true,        // 启用 GFM 支持
  breaks: true,     // 支持换行
  sanitize: false   // 不清理 HTML
})

核心转换逻辑

const htmlOutput = computed(() => {
  if (!markdownInput.value.trim()) return ''
  
  try {
    return marked.parse(markdownInput.value)
  } catch (error) {
    return `<div class="error-message">转换错误: ${error.message}</div>`
  }
})

响应式设计

• 桌面端：左右分栏布局
• 移动端：上下堆叠布局
• 自适应字体大小和间距

总结

Markdown 转 HTML 工具已成功实现，提供了完整的转换功能和良好的用户体验。该工具可以满足大多数 Markdown 到 HTML 的转换需求，并且易于扩展和维护。