doocs/md 微信 Markdown 编辑器：从第一篇草稿到公众号发布的完整实操指南

doocs/md 微信 Markdown 编辑器从第一篇草稿到公众号发布的完整实操指南【免费下载链接】md✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器支持 Markdown 语法、自定义主题样式、内容管理、多图床、AI 助手等特性项目地址: https://gitcode.com/doocs/mddoocs/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并自动生成figcaptionalt 文本成为图注。多张图横滑展示滑动图组放 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^2b^2c^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），仅供参考