doocs/md 微信 Markdown 编辑器：从第一篇草稿到公众号发布的完整实操指南
doocs/md 微信 Markdown 编辑器：从第一篇草稿到公众号发布的完整实操指南
【免费下载链接】md✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、自定义主题样式、内容管理、多图床、AI 助手等特性项目地址: https://gitcode.com/doocs/md
doocs/md 是一款面向微信公众号的 Markdown 编辑器：在左侧写 Markdown，右侧得到能直接粘进公众号后台的 HTML——LaTeX 公式、Mermaid 流程图、信息图、Callout 标注都支持，并内置主题样式与多平台发布通道。下面按"写作—排版—可视化—发布"的顺序，把它的功能逐层拆开，每节都给出可贴进编辑器验证的写法，以及源码里对应的实现位置。
五分钟跑起来：安装后你会看到什么
仓库是 pnpm workspace，主程序在apps/web。最快的体验路径是在 Chrome/Edge 地址栏打开项目在线页面；需要本地跑的话：
git clone https://gitcode.com/doocs/md cd md pnpm install pnpm -F web dev打开后是「左编辑、右预览」布局，顶部一行菜单：File / Edit / Format / Insert / View / Help。新建一篇空文档时，编辑器会载入一份按界面语言匹配的默认示例文章（中文界面即 markdown.zh-CN.md），把公式、图表、注音都演示了一遍——它本身就是一份渲染能力的验收清单。右侧预览区底部有字数与阅读时间统计，左侧大纲面板可以按标题层级跳转。
这一层交代完，下面进入写作本身：先搞定文字层面的所有"长相问题"。
🖋️ 文字层：把排版、标注和引用一次写对
让重点更跳眼：高亮、下划线与波浪线
写教程时只有加粗和斜体远远不够：一个参数名要"下划线"以示强调，一句警告要"高亮"底色。doocs/md 在标准 Markdown 之外补了四种行内标记：
==高亮== ++下划线++ ~波浪下划线~ x^2^==高亮==渲染为黄色底纹++下划线++渲染为实线下划线~波浪下划线~渲染为波浪线（单个波浪线）x^2^渲染为上标
最常见的误区：英文词尾的++会被当成字面量——C++不会被吃成下划线；但中文词内的把++重点++标出能正常渲染。上标是唯一可以紧贴英文字符的定界符（x^2^成立），不过上标内容里不能有空格，a ^ b会退回普通文本。这个边界是刻意设计的：扩展实现见 markup.ts，它用逐字符扫描而不是正则 lookbehind 来判断左右边界，避免旧版 WebView 在解析正则时直接抛错拖垮整个渲染器。
给生僻词加注音：Ruby 标注
做科普、教材或日语内容时，需要给文字上方挂拼音/假名。doocs/md 支持两种写法：
[你好世界]{nǐ・hǎo・shì・jiè} [小夜時雨]^(さ・よ・しぐれ)读音部分用・、．、。、-四种分隔符按字拆分，与原文逐字配对。当读音数量和字数对不上时不会报错：多出来的字原样输出，多出来的读音自动丢弃（ruby.ts 的渲染逻辑）。
画一个带标题的提示框：Callout 与学术环境
写技术文档时，"注意事项"和"正文"要视觉上分开。两种等价的写法：
> [!WARNING] 上线前必读 > 先备份数据库，再执行迁移脚本。::: tip ::: tip 容器写法效果相同。 :::类型名后面可以跟自定义标题，正文支持完整 Markdown 与公式。内置类型远不止 NOTE / TIP / IMPORTANT / WARNING / CAUTION 五个——alert.ts 里还登记了 Obsidian 风格的abstract、tldr、success、question、bug、example等，以及theorem、lemma、definition、proof、remark一整组学术环境，每种都有独立图标。类型名也可以是任意中文文本：识别不到内置样式时，回退为默认样式并以该名称作标题。
补充材料沉底：脚注
文章里引用外部资料、想留一句备注但不想打断正文节奏，就写脚注：
这个结论来自早期版本[^1]。 [^1]: 详见项目 CHANGELOG 2.0 部分。正文渲染为上标[1]，文末汇总成引用区，且正文与文末双向可跳转（实现见 footnotes.ts）。注意它和下一节"外链转引用"生成的脚注是同一套渲染管线——后者是自动版的脚注。
不手写竖线：表格与目录
不想对着|---|数破折号时，走菜单：Edit → Insert table（中文界面为「插入表格」），弹出行列数与对齐方式的选择框，确认后直接落一段表格文本。渲染层面表格外层包了overflow: auto的容器，窄屏手机能横向滑动而不撑破版面（renderer-impl.ts 的table()）。
长文档需要导航时，单独一行写[TOC]即生成层级目录。两个容易踩的点：一级标题不进入目录；目录锚点按标题在文中的出现顺序编号，与右侧大纲面板共用同一套编号，所以"目录跳转"和"大纲跳转"指向的是同一个位置。
文字层的活儿干完，接下来让数据"长"出图形来。
📊 可视化层：公式、流程图与信息图
插入一段可渲染的公式：LaTeX 与 MathJax
数学内容从行内$E = mc^2$起步，块级用$$...$$；标准 LaTeX 定界符\(...\)与\[...\]同样识别，两种风格可以混在同一段里。
$$ \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} $$一个很实用的交互：在预览区点击任意已渲染公式，会弹出内置公式编辑器（带常用公式库），改完直接回写源码。性能上有个值得知道的设计：MathJax 的tex2svg是同步排版，而预览区每次按键批次都会整体重渲染，katex.ts 因此给公式套了一层容量 400 的 LRU 缓存——没改动的公式直接复用旧 SVG，只有 MathJax 尚未就绪时的占位符不进缓存，保证加载完成后能自动补位成真实公式。
画一张流程图：Mermaid 与 PlantUML
表达"步骤与依赖"时，Mermaid 是最轻量的选择：
饼图、时序图同理，都写在plantuml围栏即可：
@startuml Alice -> Bob: hello @enduml让数据变成卡片：Infographic 信息图
表格局限在于只能"列"数据，不能"画"数据。```infographic围栏把结构化文本渲染成信息图卡片，底层是 AntV Infographic 引擎：
infographic list-row-horizontal-icon-arrow data title 增长引擎 items - label 获客 value 18.6 icon rocket-launch它和 Mermaid 走的是同一套"先占位、后填充"的异步管线，但多了一个细节：渲染时把 SVG 离屏导出后存入容量 50 的缓存（infographic.ts），且缓存键包含主题模式——预览区每敲一次键触发整页重渲染时，已画好的信息图不会重绘，切明暗主题才会触发重算。
可视化部分到此齐活。接下来是发布环节最容易被坑的地方。
📤 发布层：微信里的坑与对策
微信里外链打不开怎么办
微信公众号文章只允许跳转到公众号内容。外部链接在微信里看起来是个链接，点不动。对策二选一：
- 明文书写：把 URL 以纯文本形式写进正文，读者手动复制；
- 在格式菜单开启Format → Convert external WeChat links to footnotes（中文界面为「外链转引用」），所有非
mp.weixin.qq.com域名的链接会被自动注册为脚注、正文留下上标编号，读者点编号看文末链接指向。
这段逻辑在 renderer-impl.ts 的link()里：先判断链接是否微信域名，是则原样保留，否则在citeStatus开启时走addFootnote()。
控制图片尺寸和图注：alt 里的竖线语法
公众号后台对图片宽度不友好，想按版心控制图片大小可以直接写在 Markdown 里：
 alt 文本末尾的|宽或|宽x高会被解析为width/height属性。再在设置里选择「图注格式」打开图注后，图片会被包进<figure>并自动生成<figcaption>，alt 文本成为图注。
多张图横滑展示：滑动图组
放 3~5 张同尺寸截图时，微信里纵向堆叠太占篇幅。横滑图组语法：
<,>渲染结果是一个overflow-x: scroll的 section 容器，每张图占满宽度、下方带 alt 说明，底部附"左右滑动看更多"提示（slider.ts）。图片尺寸尽量一致，滑动体验才均匀。
微信的坑处理完，最后看几个"水面之下"的设计细节，解释上面这些功能为什么快、为什么稳。
🔍 水面之下：三处实现细节
- 缓存键把主题算进去：公式缓存键 = 显示模式 + 样式开关 + 公式原文（katex.ts）；信息图缓存键 = 源码哈希 + 主题模式后缀（diagram-theme.ts）。动机是预览区"每次按键整页重渲染"的场景：内容没变的图形绝不应重算，而主题变了就该重算——缓存键设计就是把这两种情况分开。
- 不用 lookbehind 的边界判断：
==/++/~需要知道"前面是不是英文字符"来决定是否渲染。正则 lookbehind 在部分旧版 WebView 中解析即报错，会击穿整个渲染流程；markup.ts 因此改为indexOf逐字符扫描边界，牺牲一点优雅换全平台可用。 - 图表状态机：Mermaid / PlantUML / Infographic 统一走"loading → ready / error"状态属性（
MD_DIAGRAM_STATE），加载中占位、失败显示本地化错误信息，且加载中文案随界面语言切换——写文档的人看到的提示语永远是当前 UI 语言，而不是硬编码英文。
自测清单：贴进编辑器逐条验证
==高亮==、++下划线++、~波浪~、x^2^四种标记都渲染；同句里C++保持字面量[你好世界]{nǐ・hǎo・shì・jiè}每个字上方都有拼音$a^2+b^2=c^2$行内公式与$$...$$块级公式都渲染；点击预览里的公式弹出公式编辑器> [!TIP] 自定义标题与::: note两种 Callout 写法渲染出带图标标题的框[^1]+ 文末[^1]: 定义生成脚注，正文上标与文末条目可互相跳转- 开「外链转引用」后，一个
https://example.com链接变成上标 + 文末引用 图|400图片宽度受限；<a,b>生成可横滑的图组- 单独一行
[TOC]生成目录，点击条目跳到对应标题
写在最后
doocs/md 的定位很集中：让 Markdown 写完即发布到微信公众号，中间不留手工修版式的环节。如果你正好在给公众号写技术长文，上面三层——文字、可视化、发布——就是全部所需；若还想继续往下挖，packages/core/src/extensions/下每个文件都对应一项可单独扩展的渲染能力，是很好的入口。
【免费下载链接】md✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、自定义主题样式、内容管理、多图床、AI 助手等特性项目地址: https://gitcode.com/doocs/md
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
