开源发现

写公众号、知乎或掘金时，最烦的往往不是「有没有内容」，而是排版：标题层级、配色、代码块、引用框，以及微信编辑器对外部样式的种种限制。MDskill-Web（GitHub：`AIPMAndy/MDskill-Web`）是 AI酋长 Andy（@AIPMAndy）开源的浏览器端 Markdown排版工具：左侧写 Markdown、右侧实时预览，内置 33种专业主题，一键复制完全内联样式的富文本到微信公众号、知乎、掘金，也支持导出 HTML与图片。本文核对 GitHub API时，公开星标约 170、fork约 16；主语言 TypeScript；协议 Apache-2.0（README另有附加商业条款说明）；当前发行版约 v1.2.0；技术栈为 React 18 + Vite 5 + Tailwind CSS，Markdown解析用 Marked，清理用 DOMPurify，图片导出用 html2canvas。权威仓库：https://github.com/AIPMAndy/MDskill-Web ；在线演示请直接打开 https://aipmandy.github.io/MDskill-Web/ ，无需先配环境即可体验主题切换与复制流程。

它不是又一个「只能预览、粘到公众号就塌样式」的纯编辑器，而是把主题排版 + 平台粘贴适配当成一等公民：复制出去的是带内联 CSS的富文本，尽量减少在微信后台再手工调格式的时间。项目可完全本地运行，也可直接打开 GitHub Pages演示站即用；作者个人站点与简介见 metaver.vip，GitHub／X账号均为 @AIPMAndy。

图片来源：官方仓库 screenshot-homepage.png

它解决什么问题

中文内容创作者日常要跨多个平台发布：微信公众号编辑器对外部 CSS不友好，知乎与掘金又各有一套粘贴行为。自己维护一套「公众号专用 CSS」成本高，而且每次改版都要回归测试；用闭源排版 SaaS则要操心账号、草稿隐私与续费。技术博主还特别需要代码高亮、表格、任务列表在粘贴后仍然可读——否则一篇教程会在手机端变成「灰扑扑的纯文本墙」。另一类痛点是「审美决策成本」：同样一篇产品更新说明，用极简留白还是用科技媒体风，会直接改变读者第一印象，但大多数 Markdown预览器只提供一两种皮肤，逼着作者事后在各平台后台逐段改色。

MDskill-Web把这些痛点收成一条路径：用熟悉的 Markdown写作 → 在主题面板里切换 Apple／禅意／开发者／媒体／公众号等风格 → 点「复制排版」→ 粘贴到目标编辑器。官方 README明确强调「完全内联样式、无需额外处理」，并单独列出 7个专为公众号优化的主题（如 wechat-elegant、wechat-medium、wechat-apple等）。对希望数据留在本机、不想把草稿上传到第三方排版站的作者，本地 `npm install && npm run dev`（或静态部署 `dist`）同样成立。换句话说，它把「写作格式」和「分发皮肤」拆开：格式仍是 Markdown，皮肤是可切换的主题配置，分发则靠内联富文本或 HTML／图片导出。

图片来源：官方仓库 screenshot-apple-light.png

33种主题怎么分

仓库把主题按场景拆成几大类，便于「先选气质再写内容」，而不是在空白画布上从零调 CSS：

• 创意类（约7个）：多彩活力、杂志布局、艺术创意、公众号·优雅、Medium长文、Hische编辑部、优雅简约——偏品牌故事、活动稿与视觉张力更强的栏目。
• 技术类（约9个）：GitHub Dark／Light、Wired、Anthropic Claude、开发者、终端控制台、赛博朋克、Silicon Valley、Claude AI——适合技术博客、版本说明与代码密集文。
• 极简类（约9个）：禅意留白、Apple Light／Dark／Gray、极简现代、Minimal Pro、纸质纹理、Apple极简等——突出留白与内容本身，适合个人随笔与产品说明。
• 商务／媒体类（约6个）：纽约时报、Guardian、焦橙文档，以及若干公众号化的新闻／长文变体——适合深度报道口吻与对内文档。
• 故事类（约2个）：小说阅读、个人日记——偏连续阅读与手账气质。

热门推荐里，README常点名 Apple Light／Dark、禅意留白、多彩活力、NYTimes、Medium 等。预览区支持 Desktop／Tablet／Mobile响应式切换，写完就能大致看到手机端观感。主题预览截图（Apple Light／Dark／Gray等）可直观对比同一篇 Markdown在不同皮肤下的标题、段落与强调色差异——这也是开源发现文更值得引用项目自带截图、而不是通用图库的原因。

图片来源：官方仓库 screenshot-apple-dark.png

它能做什么（能力清单）

• 实时分屏编辑：左写右看，Markdown即时渲染；支持代码高亮、表格、任务列表等常见扩展写法（以当前版本编辑器能力为准）。对长文改稿，分屏比「保存后再开预览页」更省上下文切换。
• 一键富文本复制：生成内联样式结果，面向微信公众号／知乎／掘金等粘贴场景；官方教程路径是「编辑 → 选主题 → 复制排版 → 粘贴发布」。推荐公众号主题可先试 wechat-elegant、wechat-medium、wechat-apple。
• 多种导出：除富文本外，可导出 HTML 完整页，或用 html2canvas 生成图片，方便存档、海报化摘要与社交分享。HTML适合自建博客或静态页二次托管；图片适合需要「整屏一张图」传播的场景。
• 搜索与大纲：全文搜索（含正则）、结果高亮，以及大纲导航，方便长文定位、改小标题与核对结构。
• CLI与本地部署：除网页外提供 `cli.js`（可指定模板输出 HTML，详见仓库 `CLI.md`）；`npm run build` 产出静态资源；推送到 `main` 后 GitHub Actions可发布到 Pages（正式演示站 base路径为 `/MDskill-Web/`）。README提示原 Netlify地址已不可用，请以 GitHub Pages为准；本地可用 `npm run preview -- --base=/MDskill-Web/` 对齐生产路径做自检。
• 体积与工程指标（官方 README口径）：约33主题；打包体积约 138KB（gzip）；构建时间宣称约两秒内；TypeScript类型安全与功能测试覆盖。对「想嵌进内网门户当静态工具」的团队，体积与构建速度往往比花哨功能更关键。

技术栈一句话：React 18 + TypeScript + Vite 5 + Tailwind，依赖里能看到 `marked`、`dompurify`、`html2canvas`、`lucide-react`。版本号在 `package.json` 为 1.2.0，与 GitHub Release「主题系统大幅升级」叙事一致；路线图里提到 PDF导出、自定义主题编辑器、主题收藏分组、云端同步、多人协作、插件系统与移动端 App等仍属规划，选型时请以仓库当前代码为准，不要把路线图当已交付功能。贡献主题的路径在 README写得很直白：在 `src/templates/index.ts` 增加配置并附预览截图提 PR。

图片来源：官方仓库 screenshot-apple-gray.png

有什么好处，又要注意什么

好处一：创作与分发解耦。 你只维护一份 Markdown，用主题决定「看起来像产品文档还是像科技媒体」，再复制到各平台，减少「每个后台重排一遍」的摩擦。对专栏作者来说，这意味着同一篇深度文可以先用 Medium／NYTimes气质在站内预览，再换公众号主题出一版「更适合信息流阅读」的皮肤，而不必改正文结构。

好处二：开源可自托管。 Apache-2.0主体协议便于学习与企业内部使用；演示站公开可点，本地构建可离线改。内容与主题配置都在你控制的环境里，适合对草稿敏感的团队。

好处三：公众号场景被单独打磨。 内联样式 + 多套 wechat-* 主题，比「通用 Markdown预览再截图」更接近真实发文流程；也比纯手工在公众号后台套模板更快迭代。

好处四：技术文友好。 开发者／终端／GitHub等主题让代码块、行内标记与标题层级更协调，降低「教程贴出去像文档站截图」或「像未排版草稿」两种极端。

注意点也很具体。 README「开源协议」一节在 Apache-2.0之外写了附加条款：去除品牌标识、提供商业 SaaS、转售／授权给第三方等需书面授权；商业合作可联系作者微信 AIPMAndy。二次分发或嵌入产品前，请自行阅读 `LICENSE` 与 README全文，不要只看 SPDX字段。粘贴到第三方平台时，目标编辑器仍可能改写部分样式，发前建议在各平台预览一次，尤其是复杂表格与深色主题在手机端的对比度。项目另有相关桌面端仓库 MDskill（Mac）（`AIPMAndy/MDSKILL`），功能定位不同，本文只覆盖 Web版，避免把桌面端能力误读进本仓库。

图片来源：GitHub avatar for AIPMAndy

快速上手与典型用法

最省事：浏览器打开 https://aipmandy.github.io/MDskill-Web/ ，粘贴或撰写 Markdown，选主题后复制排版。本地：`git clone` → `npm install` → `npm run dev`（README写明开发服务访问 `http://localhost:3000`）。生产构建：`npm run build`，将 `dist` 部署到任意静态服务器；若要复现 Pages路径，可用 `npm run build -- --base=/MDskill-Web/`。CLI用户可参考仓库 `CLI.md`，例如用指定模板把 `input.md` 渲成 HTML，适合放进脚本化发布流水线。

典型用法可以按角色记：公众号运营优先 wechat-* 主题，复制后进公众号后台预览；技术博主优先 GitHub／终端／开发者主题，导出 HTML或富文本到掘金／博客园；个人创作者用禅意留白或小说阅读写长文，必要时导出图片做社交媒体摘要。无论哪种路径，建议先用一小段含标题、列表、代码与引用的样例文把主题对比完，再粘长文，避免写到一半才发现某主题不适合代码块密度。

适合谁，以及和相邻工具怎么区分

适合公众号作者、技术博主、个人创作者——尤其需要「Markdown写完就能贴进微信／知乎／掘金」且想自托管排版工具的人；适合想研究「主题化 Markdown → 内联富文本」实现的前端同学；也适合企业内容团队在内网部署一份静态站、统一品牌观感。若你只要极简记事、或必须要闭源 SaaS的协作审稿与权限流，不必强行迁移；若你主要需求是桌面端更强的本地能力，应去看作者的 Mac版 MDskill，而不是把期望全部压在本 Web仓库上。

和其他「Markdown编辑器」相比，MDskill-Web的卖点不在协同编辑或云笔记同步，而在面向中文主流分发平台的排版与粘贴；和其他「公众号排版工具」相比，它强调开源、可本地运行与主题数量。选型时可以先问三句：我是否以 Markdown为正文真源？我是否经常要发公众号／知乎／掘金？我是否接受把主题当皮肤、把内容当结构？三者都偏「是」，再打开在线演示试十分钟，通常就能判断是否值得收藏。权威来源始终是 https://github.com/AIPMAndy/MDskill-Web与在线演示 https://aipmandy.github.io/MDskill-Web/ 。本文仅作开源发现介绍，不替代官方 README、许可证与附加商业条款；星标与 fork数以你阅读时的 GitHub页面为准。