doocs/md 是一款面向内容创作者的 Markdown 编辑工具核心功能包括实时预览排版效果、自定义字体 / 主题色、AI 辅助润色创作、多图床图片管理以及最实用的公众号格式一键复制功能能直接将 Markdown 内容转换成适配公众号后台的格式无需手动调整行距、字体等细节。同时它还支持代码高亮、公式渲染也适合技术类公众号文章的创作。作为一名自媒体创作者使用 doocs/md 最大的感受就是 “省心”。以前写一篇公众号文章光是排版就要花半小时以上调整行距、分段、插入图片后还要反复预览修改用了这款工具后左边写 Markdown 内容中间实时看最终效果AI 还能帮忙优化标题和内容写完一键复制到公众号后台就能用原本 3 小时的创作排版工作1 小时就能完成把更多精力留在内容打磨上。在没有用 cpolar 之前doocs/md 只能在局域网内使用比如在家写的稿子到公司想接着改就得传文件和合作的编辑沟通时对方也只能下载文件查看没法实时提修改意见接入 cpolar 后本地的编辑器能生成公网访问链接不管是在地铁上用手机改稿还是把链接发给异地的编辑对方都能实时查看预览效果还能在线讨论修改细节。比如上周和团队赶一篇推文我在咖啡店用手机通过 cpolar 链接编辑同事在办公室实时预览提意见原本需要反复传文件的协作流程变得和面对面沟通一样高效彻底摆脱了局域网的限制。高效协作、轻松享受的实现方法在下面呦快去实现吧1 项目 doocs/md 介绍开源项目地址https://github.com/doocs/mddoocs/md是一个 GitHub 开源的 Markdown 编辑与排版工具。核心能力实时预览、可定制主题与排版细节字距/行距、代码高亮、公式/流程图、图片上传与多图床、草稿管理与导出。AI 助手润色改写、标题/摘要建议、格式转换等显著降低内容打磨成本。公众号复制支持“复制为公众号格式”将 Markdown 一键适配到公众号后台减少二次排版工作量。适用场景个人与团队写作、技术文档、公众号图文排版与协作审稿。2 安装Nodejs环境2.1 下载Nodejs安装程序官方下载地址https://nodejs.org/zh-cn/download打开Nodejs的官方下载页面选择v20.19.5(LTS)版本进行下载2.2 安装Nodejs程序首先双击执行下载的node-v20.19.5-x64.msi程序然后点击Next接下来勾选I accept the terms in the license agreement同意许可协议继续点击Next进行下一步接着选择安装位置默认该位置即可点击Next进入下一步到自定义设置页面可按需设置直接默认即可点击Next进入下一步接下来到本地模块的工具的界面不用勾选直接点击Next即可最后点击Install进行安装安装完成点击Finish即可2.3 验证Nodejs是否安装电脑按快捷键win R,在弹出的运行框输入cmd点击确定或者回车打开cmd窗口即命令提示符窗口,输入如下命令进行验证nodejs版本# 查看node版本node-v# 查看npm版本npm-v2.4 设置国内淘宝镜像源为了方便项目依赖下载更快建议设置国内镜像源以加速下载在cmd窗口中执行如下命令npmconfigsetregistry https://registry.npmmirror.com/然后输入如下命令进行查看npmconfig list3 下载本地部署doocs/md项目3.1 将项目下载至本地打开开源项目地址然后点击Code展开然后点击Download ZIP按钮进行下载项目地址https://github.com/doocs/md# 如果电脑上有安装git,也可以使用git clone命令将项目克隆下来gitclone https://github.com/doocs/md.git下载步骤可以参考如下图3.2 解压doocs/md项目压缩包下载到本地以后进行解压(这里使用7-zip进行解压推荐使用7-zip解压工具比较好用)# 7-zip官网下载地址https://7-zip.org/download.html解压步骤参考如下图3.3 安装依赖和启动doocs/md项目进入到md-main的项目目录中然后在目录地址栏输入cmd回车即可打开当前项目所在目录的cmd窗口输入如下命令进行项目依赖安装pnpminstall安装完成如下图所示接下来输入如下命令启动该项目pnpmweb dev启动时可能回提示Nodejs应用通过防火墙的警告点击允许访问启动成功控制台如下图所示可以看到控制台输出了多个访问地址以ip为localhost的这一条为例,在浏览器中访问测试http://localhost:5173/md/可以看到成功的访问到了项目4 将网站穿透至公网cpolar穿透篇在安装cpolar前说明一下为什么需要安装cpolar。由于浏览器的安全限制复制公众号格式的功能需要使用 Clipboard API而这个 API 只能在安全上下文HTTPS或本地环境localhost下工作。当我们在局域网或其他网络环境下访问编辑器时由于不是 HTTPS 协议复制功能将无法正常使用。举个具体例子你在本地部署好网站后同事通过局域网IP可以正常访问和编辑但需要复制公众号格式时就会失败因为局域网使用的是HTTP协议而复制功能必须要求HTTPS环境。相比传统的云服务器域名SSL方案cpolar具有零成本启动、配置简单、即开即用等优势特别适合个人开发者、小团队、内容创作者等需要快速搭建可分享编辑器的用户群体无需购买服务器和域名一条命令即可完成内网穿透大大降低了使用门槛。4.1 什么是cpolar?cpolar 是一款内网穿透工具可以将你在局域网内运行的服务如本地 Web 服务器、SSH、远程桌面等通过一条安全加密的中间隧道映射至公网让外部设备无需配置路由器即可访问。广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台并提供一键安装脚本方便部署。4.2 下载cpolar打开cpolar官网的下载页面点击立即下载 64-bit按钮,下载cpoalr的安装包:下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:cpolar version出现如上版本即代表安装成功!4.3 注册及登录cpolar web ui管理界面4.3.1 注册cpolarcpolar官网访问cpolar官网点击免费注册按钮进行账号注册进入到如下的注册页面进行账号注册4.3.2 访问web ui管理界面注册完成后,在浏览器中输入如下地址访问 web ui管理界面:http://127.0.0.1:9200输入刚才注册好的cpolar账号登录即可进入后台页面:4.4 穿透doocs/md项目的WebUI界面4.4.1 随机域名方式(免费方案)随机域名方式适合预算有限的用户。使用此方式时系统会每隔24 小时左右自动更换一次域名地址。对于长期访问的不太友好但是该方案是免费的如果您有一定的预算可以查看大纲4.4.2的固定域名方式且访问更稳定。点击左侧菜单栏的隧道管理展开进入隧道列表页面页面下默认会有 2 个隧道ssh隧道指向22端口tcp协议website隧道指向8080端口http协议http协议默认会生成2个公网地址一个是http另一个https免去配置ssl证书的繁琐步骤点击website隧道的编辑按钮填写如下信息注意每个用户创建的隧道显示的公网地址都不一样接着点击左侧菜单的状态菜单接着点击在线隧道列表菜单按钮可以看到有2个wechatmd-5173的隧道一个为http协议,另一个为https协议:接下来在浏览器中访问wechatmd-5173隧道生成的公网地址http和https皆可这里以https为例可以看到报错了这个报错说明Vite 的安全策略拦截了请求因为目标域名208ce144.r1.cpolar.top不在允许的访问列表里。接下来需要修改项目中的vite.config.js文件。打开md-main项目目录进入到apps/web目录下找到vite.config.js文件右键打开方式选择记事本进行编辑,操作步骤如下图所示打开后在base,的后面添加如下代码(注意逗号一定要是英文的)server:{allowedHosts:true},添加后参考如下图所示代码保存后访问浏览器进行测试不用重启项目vite会自行构建编译可以发现成功访问到项目啦4.4.2 固定域名方式升级任意套餐皆可在官网升级任意套餐即可获得固定二级子域名推荐升级NasNAS 10M或更高套餐带宽越大加载访问的速度越快。当然预算有限的客户也可以选择基础的套餐皆可支持固定二级子域名功能。好啦接下来开始固定保留二级子域名教程首先进入官网的预留页面选择预留菜单即可看到保留二级子域名项填写其中的地区、名称、描述可不填项然后点击保留按钮操作步骤图如下列表中显示了一条已保留的二级子域名记录地区显示为China Top。二级域名显示为wechatmd。注二级域名是唯一的每个账号都不相同请以自己设置的二级域名保留的为主接着进入侧边菜单栏的隧道管理下的隧道列表可以看到名为wechatmd-5173的隧道点击编辑按钮进入编辑页面修改域名类型为二级子域名然后填写前面配置好的子域名点击更新按钮来到状态菜单下的在线隧道列表可以看到隧道名称为wechatmd-5173的公网地址已经变更为二级子域名固定域名主体及后缀的形式了这里以https协议做访问测试加载稍慢需耐心等待一下:访问成功这样一来你本地部署的doocs/md项目就支持分享给朋友访问啦5 使用doocs/md项目编写公众号文章(实战)经过前面的部署配置现在我们已经成功搭建了一个功能强大的AI加持Markdown编辑器。接下来让我们深入体验这个编辑器的核心功能包括Markdown转公众号格式、AI智能对话、自定义主题等特性看看它是如何让我们的创作效率提升10倍的。5.1 界面布局与基础功能介绍首先介绍一下页面的区域和结构整个编辑器采用经典的三栏布局设计分别为左侧Markdown原生编辑区域这里是我们的主要工作区域支持完整的Markdown语法顶部工具栏包含文件、格式、编辑、样式、帮助等菜单右上角有复制、发布按钮以及设置按钮齿轮图标左侧主体区域的详细图示可以参考如下图中间实时预览区域实时显示Markdown转换后的公众号格式效果所见即所得编辑时立即看到最终效果右边顶部工具导航栏支持复制预览的文章格式主题定制面板等发布暂不可用预览区域内左上角可展开查看大纲和跳转底部状态栏显示文章统计信息字数、字符数、阅读时间中间主体区域的详细图示可以参考如下图右侧主题定制面板点击设置按钮展开包含丰富的个性化选项主题选择经典、优雅、简洁三种风格字体设置无衬线、衬线、等宽字体字号调节从更小到更大的五个级别主题色11种预设颜色 自定义颜色选择代码块主题支持多种代码高亮风格图注格式多种图片说明显示方式预览模式移动端和电脑端白天模式or暗黑模式右侧主体区域的详细图示可以参考如下图截图进行拼接了定制面板一页显示不全暗黑模式效果图参考如下好了主体页面大概就介绍这么多啦具体功能可以自行详细挖掘一下5.2 Markdown转公众号格式首先需要准备一篇Markdown格式的文章然后将其导入至doocs/md项目中(直接复制粘贴到编辑区域也可以)以当前编写的这篇文章为例如下为Markdown的效果图将该文章复制到编辑器中也可以选择左上角文件导入.md的方式导入然后查看其效果图觉得怎么样效果如何是不是很棒接下来我们把转换成公众号格式的预览效果复制起来粘贴到公众号查看效果看看是否和预览的效果一模一样首先点击右上角的复制按钮点击复制:复制下来公众号的格式后打开公众测试平台的公众号发布文章页面,将文章内容粘贴进来查看效果可以发现是不是一模一样等于是你在doocs/md项目中简单调整好主题字体等格式后直接在公众号中设置封面等相关信息就可以直接发布啦效率简直极大提升5.3 AI智能对话与内容生成在完成了“写作—预览—复制发布”的基础流程后本节将把AI真正融入写作我们会打开内置的AI助手面板配置大模型API示范如何用指令一键生成大纲、段落与配图文案并通过“润色/改写/续写/提炼要点”等能力快速打磨内容最终把AI生成的结果无缝落到Markdown中形成可直接预览与发布的成稿。5.3.1 AI助手面板功能介绍首先需要打开AI对话框点击左侧Markdown原生编辑区域的右上角黑色的小按钮点击打开后可以看到如下AI对话框页面5.3.2 配置通义千问大模型首先需要领取千问百万tokens来到阿里云百炼官网点击右上角新用户登录即享每个模型100万免费tokens:阿里云百炼官网https://bailian.console.aliyun.com/#/home领取完成后接下来进入密钥管理设置设置千问api密钥密钥管理https://bailian.console.aliyun.com/?spma2c4g.11186623.0.0.60907980OAftBftabmodel#/api-key点击创建api-key填写完信息然后点击复制按钮复制下来格式大概如下sk-53207f95f7e44ec18d05669767f649b7接下来点击AI对话框中的设置图标按钮进入到AI大模型api配置页面具体操作如下图通义千问-plus模型api地址https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions5.3.3 配置编写Markdown文章的AI指令为了让通义千问-plus在本项目中发挥最佳效果建议新增一条“自定义指令”用于生成/改写更贴近公众号风格的 Markdown。操作点击 AI 对话框顶部“”新增指令名称建议填入公众号化改写结构化模板粘贴下方内容即可。指令模板你是公众号写作与排版编辑。请把输入内容整理为层次清晰、易读的 Markdown — 标题采用编号结构二级标题用阿拉伯数字如“## 1 …、## 2 …”三级标题按“3.1/3.2/3.3”。 — 仅输出 Markdown 正文简体中文不写解释或前后缀。 — 段落短句化单段≤3行关键点用列表必要时用引用 提示。 — 保留代码块/链接/图片的原始 Markdown不修改 URL。 — 用词简洁、信息密度高避免空话与“AI/免责声明”等无关表述。 若未提供选区内容请基于标题与上下文先给出合理结构与简短导语。 待处理内容 {{sel}}配置好后回到AI对话的首页可以看到添加的指令已经成功显示了点击后下方的对话框中会自动插入指令模板这样一个AI指令就创建好啦5.3.4 使用AI指令进行编写文章在前面小节中已经设置好了AI指令接下来用配置好的AI指令加上我们自己的白话文询问尝试一下写一篇小白入门markdown的教程必须详细相关的语法代码块中演示了还需要显示出效果等点击发送可以看到AI已经按照markdown格式的要求给我们输出了一篇文章内容生成完成后点击复制按钮粘贴到markdown原生编辑区域中查看效果预览可以看到效果是很不错的开头部分语法及效果展示末尾还贴心的加上了误区和技巧以及推荐使用的markdown编辑工具最后让其给我一个适合这篇文章的公众号标题它也是给出了多种风格的标题供我挑选稍微做了一下小的主题格式调整是不是感觉文章就已经挺好看的了怎么样这个doocs/md项目是不是提升了很大的效率6 给doocs/md项目添加访问授权验证在完成公网部署后我们发现doocs/md项目默认无需登录即可访问这在家庭或团队环境中可能存在安全隐患。为了确保只有授权用户才能使用我们的编辑器cpolar提供了便捷的访问授权验证功能。6.1 为什么需要访问授权隐私保护防止他人随意访问你的创作内容资源安全避免AI API密钥被恶意使用访问控制确保只有团队成员或指定人员可以使用成本控制防止API调用量被恶意消耗6.2 配置访问授权验证首先打开cpolar管理界面进入隧道管理→隧道列表找到wechatmd-5173隧道点击编辑按钮在编辑页面中点击高级按钮展开高级配置选项按照下图进行设置在HttpAuth这一栏输入admin:123456 其中【admin】为你想要设置的账号中间的冒号是英文的不是中文【123456】为想要给admin用户设置的密码6.3 验证授权效果重新访问你的公网地址会发现浏览器弹出登录验证框输入刚才设置的用户名和密码即可正常访问编辑器。这样你的doocs/md项目就具备了基础的安全防护既保持了便捷的远程访问能力又确保了内容与资源的安全。总结doocs/md 解决了公众号排版的核心痛点cpolar 又打破了它的访问限制两者结合让内容创作和协作都更灵活。对于日常需要产出公众号内容的人来说简单易上手还能实实在在提升效率值得一试。感谢您阅读本篇文章有任何问题欢迎留言交流。