markdown-to-wechat

一个将 Markdown 一键转换为适配微信公众号 / 知乎 / 稀土掘金排版的纯前端小工具。无需登录和上传，本地即可使用。

功能特性

• 实时预览（手机宽度自适应）
• 多套主题模板（含新增：蔷薇·紫）
• 一键复制到微信公众号（内联样式，粘贴即用）
• 一键复制到知乎（内联样式，尽量还原主题）
• Markdown 工具栏：加粗、斜体、标题、列表、引用、链接、图片、分割线
• 简易安全净化：白名单标签/属性

预览地址

预览地址

目录结构

md2wx/
  index.html          # 应用入口
  assets/
    styles.css        # 页面与主题样式
    app.js            # 逻辑与转换、复制功能

快速开始

1. 直接打开 index.html

• 大多数浏览器中可直接双击打开；
• 为更稳定的剪贴板权限，建议用本地服务打开：
  • Python: python3 -m http.server → 访问 http://localhost:8000/
  • VS Code: 安装 Live Server 插件并「Open with Live Server」

2. 左侧粘贴 Markdown，右侧实时预览。
3. 选择主题、调整字号/行高。
4. 点击「复制到微信公众号」或「复制到知乎」，在对应平台编辑器中直接粘贴。

使用说明

• 顶部卡片标题仅用于预览展示。正文内的 # 一级标题 会被保留并参与主题样式渲染。
• 复制到平台时，会将主题样式尽量转换为内联样式，提升粘贴后的保真度。
• 对话·气泡主题：当段落以「角色：内容」形式出现时，将自动转换为左右对话结构（仅预览/导出有效）。

主题一览（部分）

• 雅致·墨蓝（elegant）、活力·橙阳（sunny）、清新·森绿（forest）、浪漫·紫雾（violet）
• 简约·微信绿（wechat）、极简·纯白（minimal）、对话·气泡（dialog）、杂志·版式（magazine）
• 经典·黑白（classic）、水墨·雅韵（ink）、湛蓝·海洋（ocean）、赤玫·玫瑰（rose）
• 简洁·Notion（notion）、科技·霓虹（tech）、蔷薇·紫（roseviolet）

扩展主题

1. 在 assets/styles.css 中新增样式：

.theme-yourtheme {
  /* 主题变量或色板 */
}
.theme-yourtheme .wx-header {
  /* 头图/卡片样式 */
}
.theme-yourtheme h2 {
  /* 标题样式 */
}
.theme-yourtheme blockquote {
  /* 引用样式 */
}

2. 在 index.html 的 select#tpl-select 中加入 <option value="yourtheme">...</option>。
3. 在 assets/app.js → inlineStylesForWechat() 为 case "yourtheme" 增加「内联样式」转换规则。

常见问题

• 标题位置不对/丢失？
  • 当前版本不再抽取正文首个 h1 到预览头图，正文标题会按原位置显示。
• 复制失败？
  • 浏览器可能限制剪贴板权限。请改用 HTTPS 或本地服务打开，或使用内置回退方案。
• 外部资源
  • 使用 Google Fonts 与 marked.js CDN，需保证可访问。

部署到 GitHub Pages

1. 推送代码到 GitHub 仓库（分支 master 或 main）。
2. Settings → Pages：
   • Source 选 Deploy from a branch
   • Branch 选 master（或 main）及根目录（/）
3. 等待生效后访问 Pages 链接。

开发建议

• 保持 assets/styles.css 与 assets/app.js 的主题标识一致（如 theme-roseviolet ↔ roseviolet）。
• 复制逻辑优先保证目标平台可识别的内联样式。
• index.html 中示例 Markdown 若被编辑器自动缩进，脚本侧已做“公共缩进移除”兼容。

许可

MIT。