揭秘！这个公众号排版工具背后用了什么技术？

大家好，我是正在实战各种 AI 项目的程序员晚枫。

🤔 为什么写这篇？

上周写了篇推荐白开水 AI 社区排版工具的文章。

有读者问：

“这个工具好用是好用，但背后用了什么技术？靠谱吗？”

好问题！

今天就来扒一扒这个工具的技术栈。

🔍 先上结论

技术栈：

  • 前端：Vue.js + Element UI
  • Markdown 解析：markdown-it
  • 代码高亮：highlight.js
  • 部署：Nginx 静态托管

靠谱吗？

  • ✅ 主流技术栈
  • ✅ 开源可审计
  • ✅ 白开水 AI 社区背书
  • ✅ 无后端，数据不上传

结论：靠谱，可以放心用。

📦 技术架构拆解

1. Markdown 解析

核心库：markdown-it

1
2
3
4
5
6
7
8
9
10
11
12
import markdownit from 'markdown-it'

const md = markdownit({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    // 代码高亮处理
  }
})

const result = md.render(markdownText)

为什么选它？

  • 性能好（比 marked 快）
  • 插件生态丰富
  • 支持 CommonMark 规范

2. 代码高亮

核心库：highlight.js

支持的语言：

  • Python ✅
  • JavaScript ✅
  • Java ✅
  • Go ✅
  • C++ ✅
  • … 共 185 种语言

支持的主题：

  • default（默认）
  • atom-one-dark（暗黑）
  • github（GitHub 风）
  • solarized-light（太阳能）
  • … 共 96 种主题

3. 实时预览

原理很简单：

1
2
3
4
5
6
7
// 监听输入
watch(markdownText, (newVal) => {
  // 解析 Markdown
  const html = md.render(newVal)
  // 更新预览
  previewHtml.value = html
})

延迟优化：

  • 使用防抖（debounce）
  • 300ms 延迟渲染
  • 避免频繁计算

4. 样式定制

CSS 变量实现：

1
2
3
4
5
6
7
8
9
10
11
:root {
  --font-size: 15px;
  --line-height: 1.75;
  --code-bg: #f6f8fa;
  --code-color: #24292e;
}

.article-content {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

用户调整配置时，只需修改 CSS 变量。

5. 一键复制

核心代码：

1
2
3
4
5
6
7
8
9
10
11
async function copyToClipboard() {
  const html = previewContainer.innerHTML
  
  // 创建临时 Blob
  const blob = new Blob([html], { type: 'text/html' })
  
  // 写入剪贴板
  await navigator.clipboard.write([
    new ClipboardItem({ 'text/html': blob })
  ])
}

兼容性：

  • Chrome ✅
  • Edge ✅
  • Safari ✅
  • Firefox ⚠️（部分版本支持）

🎯 为什么没有后端？

你可能发现了：这个工具纯前端。

好处：

1. 数据安全

  • 文章内容不上传服务器
  • 没有数据泄露风险
  • 本地处理，隐私保护

2. 速度快

  • 无网络请求延迟
  • 解析在本地完成
  • 秒开秒用

3. 成本低

  • 只需静态托管
  • 无数据库
  • 无服务器运维

托管方案：

  • GitHub Pages
  • Vercel
  • Netlify
  • 自有 Nginx

白开水 AI 社区用的是自有服务器。

🔒 安全性分析

潜在风险

1. XSS 攻击

Markdown 允许 HTML，可能有 XSS 风险。

防护：

1
2
3
import DOMPurify from 'dompurify'

const cleanHtml = DOMPurify.sanitize(dirtyHtml)

2. 恶意脚本

用户输入可能包含 <script> 标签。

防护：

  • markdown-it 默认禁用脚本
  • DOMPurify 二次过滤
  • CSP 头限制

3. 数据泄露

纯前端应用，数据不上传。

验证方法：

  1. 打开浏览器开发者工具
  2. 切换到 Network 标签
  3. 使用工具时观察网络请求
  4. 应该没有文章内容的上传请求

💡 开源价值

代码在哪里？

白开水 AI 社区开源项目：

排版工具代码：

  • 社区正在整理开源
  • 预计近期发布
  • 欢迎贡献 PR

为什么开源？

  1. 透明：代码公开，无后门
  2. 可信：社区共同审计
  3. 可定制：可以自己改
  4. 可学习：前端练手好项目

🚀 技术人怎么用？

用法 1：直接使用

访问 https://python4office.cn/md2mp/

写文章，排版，发布。

用法 2：自己部署

1
2
3
4
5
6
7
8
9
10
11
# 克隆代码（开源后）
git clone https://atomgit.com/python4office/md2mp.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

用法 3：二次开发

可以定制：

  • 添加新主题
  • 支持更多 Markdown 语法
  • 集成图床上传
  • 添加模板系统

🎓 学习价值

这个项目适合：

  • ✅ 前端初学者（代码简洁）
  • ✅ Vue.js 学习者（实战项目）
  • ✅ Markdown 爱好者（理解解析原理）
  • ✅ 开源贡献者（参与社区项目）

技术点：

  • Vue 3 Composition API
  • Markdown 解析
  • 代码高亮
  • 剪贴板 API
  • CSS 变量

🚀 立即体验

工具地址：https://python4office.cn/md2mp/

建议：

  1. 先用起来，感受效果
  2. 等代码开源，研究实现
  3. 有兴趣可以贡献 PR
  4. 一起把工具做得更好

📚 相关阅读 & 课程推荐

OpenClaw 智能助手

AI 编程学习入口

交流群

金句：好的工具，不仅好用，还要透明、可信、可学习。

行动：用这个工具写篇文章，然后看看源码，学点新技术！

进群

嗨，扫码 进群

微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置：

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

编程博主，全网粉丝30w+，开源项目：python-office，我的微信：python-office