Paper – Markdown 微信公众号编辑器，纯前端 | 单 html 文件可离线执行 | 轻量级，定制属于每个人自己的微信公众号样式

前言：Paper 是一款轻量级纯前端，单 html 文件可执行的微信公众号 Markdown 编辑器。现代化三栏布局，实时 Markdown 预览，响应式设计；支持大部分 Markdown 语法 (数学公式和 Mermaid除外,请在发布区进行手工渲染)，支持信息卡片。预览区与微信公众号编辑器等宽，所见即所得。欢迎使用👏！定制属于每个人自己的微信公众号样式！

项目简介

截图

🎯 核心特性

1. 现代化三栏布局

• 编辑区：支持 Markdown 语法编写
• 预览区：实时渲染，578px 宽度（与微信公众号编辑器等宽）
• 发布区：提供一键复制和相关工具链接

2. 微信公众号完美适配

• 预览区严格按照微信公众号标准，预览区与微信公众号编辑器等宽（578px）
• 支持的样式完全兼容微信公众号平台
• 一键复制后可直接粘贴到公众号编辑器

3. 丰富的功能支持

• ✅ 基础 Markdown 语法（标题、段落、列表、表格等）
• ✅ 代码语法高亮（Kimbie Light 主题，Mac 风格）
• ✅ 自定义信息卡片（:::info 语法）
• ✅ 横屏滑动幻灯片（<![alt](url),![alt](url)> 语法）
• ✅ 同步滚动（编辑器与预览区联动）
• ❌ 数学公式（不支持，请使用发布区链接手工渲染）
• ❌ Mermaid 图表（不支持，请使用发布区链接手工渲染）

🛠️ 技术实现

前端技术栈：

• 纯 HTML + CSS + JavaScript（无框架依赖）
• Showdown.js（Markdown 转 HTML）
• Highlight.js（代码语法高亮）
• Canvas-Confetti（复制成功动画效果）

核心功能：

• 实时 Markdown 渲染
• 行内样式注入（确保微信兼容性）
• 响应式设计

📁 项目结构

Paper/
├── index.html         # 主应用文件（单文件应用）
├── README.md          # 项目说明和使用示例
├── WechatSupport.md     # 微信公众号支持的HTML标签说明
└── favicon.svg       	# 网站图标

🎨 特色功能

1. 信息卡片

:::info 提示标题
这里是卡片内容，支持**粗体**和*斜体*
:::

2. 横屏滑动幻灯片

<![图片1](url1),![图片2](url2),![图片3](url3)>

3. Mac 风格代码块

• 自动添加 Mac 样式的三色圆点
• 支持多种编程语言语法高亮

🚀 使用场景

这个项目特别适合：

• 微信公众号内容创作者
• 单 Html 文件本地编辑器
• 追求简洁高效的 Markdown 编辑体验

快速使用

1. 访问在线版 paper.thus.chat
2. 下载 html 单文件到本地直接运行
3. 下载 html 单文件部署到自己的服务器使用
4. 下载 html 单文件用 AI 修改成自己喜欢的样式后食用

项目地址

github：https://github.com/xiaolinbaba/Paper

demo：https://paper.thus.chat/