前言：Paper 是一款轻量级纯前端，单 html 文件可执行的微信公众号 Markdown 编辑器。现代化三栏布局，实时 Markdown 预览，响应式设计；支持大部分 Markdown 语法 (数学公式和 Mermaid除外,请在发布区进行手工渲染)，支持信息卡片。预览区与微信公众号编辑器等宽，所见即所得。欢迎使用👏！定制属于每个人自己的微信公众号样式！
项目简介
截图
🎯 核心特性
1. 现代化三栏布局
- 编辑区：支持 Markdown 语法编写
- 预览区：实时渲染，578px 宽度（与微信公众号编辑器等宽）
- 发布区：提供一键复制和相关工具链接
2. 微信公众号完美适配
- 预览区严格按照微信公众号标准，预览区与微信公众号编辑器等宽（578px）
- 支持的样式完全兼容微信公众号平台
- 一键复制后可直接粘贴到公众号编辑器
3. 丰富的功能支持
- ✅ 基础 Markdown 语法（标题、段落、列表、表格等）
- ✅ 代码语法高亮（Kimbie Light 主题，Mac 风格）
- ✅ 自定义信息卡片（
:::info 语法）
- ✅ 横屏滑动幻灯片（
<,> 语法）
- ✅ 同步滚动（编辑器与预览区联动）
- ❌ 数学公式（不支持，请使用发布区链接手工渲染）
- ❌ 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. 横屏滑动幻灯片
<,,>
3. Mac 风格代码块
- 自动添加 Mac 样式的三色圆点
- 支持多种编程语言语法高亮
🚀 使用场景
这个项目特别适合：
- 微信公众号内容创作者
- 单 Html 文件本地编辑器
- 追求简洁高效的 Markdown 编辑体验
快速使用
- 访问在线版 paper.thus.chat
- 下载
html 单文件到本地直接运行
- 下载
html 单文件部署到自己的服务器使用
- 下载
html 单文件用 AI 修改成自己喜欢的样式后食用
项目地址
github：https://github.com/xiaolinbaba/Paper
demo：https://paper.thus.chat/
