### [Paper –  Markdown 微信公众号编辑器，纯前端 | 单 html 文件可离线执行 | 轻量级，定制属于每个人自己的微信公众号样式](https://www.appmiao.com/article/1080)

**Published:** 2025-06-07T01:09:10

**Author:** 阿喵

**Excerpt:** Paper 是一款轻量级、纯前端的微信公众号 Markdown 编辑器，仅需单个 HTML 文件即可离线运行。其采用现代化三栏布局，支持实时预览和丰富的 Markdown 语法（不支持数学公式和 Mermaid 图表），兼容微信公众号平台并提供一键复制功能。特色包括自定义信息卡片、横屏幻灯片和 Mac 风格代码高亮。适合内容创作者实现高效、简洁的编辑体验，可在线使用或部署至本地及服务器。

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

## 项目简介

### 截图[](https://github.com/xiaolinbaba/Paper#-%E7%BC%96%E8%BE%91%E5%99%A8%E7%AE%80%E4%BB%8B)

[![paperview.png](https://github.com/xiaolinbaba/Paper/raw/main/paperview.png)](https://github.com/xiaolinbaba/Paper/blob/main/paperview.png)

### 🎯 核心特性[](https://github.com/xiaolinbaba/Paper#-%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7)

**1\. 现代化三栏布局**

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

**2\. 微信公众号完美适配**

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

**3\. 丰富的功能支持**

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

### 🛠️ 技术实现[](https://github.com/xiaolinbaba/Paper#%EF%B8%8F-%E6%8A%80%E6%9C%AF%E5%AE%9E%E7%8E%B0)

**前端技术栈：**

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

**核心功能：**

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

### 📁 项目结构[](https://github.com/xiaolinbaba/Paper#-%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84)

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

### 🎨 特色功能[](https://github.com/xiaolinbaba/Paper#-%E7%89%B9%E8%89%B2%E5%8A%9F%E8%83%BD)

**1\. 信息卡片**

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

**2\. 横屏滑动幻灯片**

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

**3\. Mac 风格代码块**

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

### 🚀 使用场景

[](https://github.com/xiaolinbaba/Paper#-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)

这个项目特别适合：

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

## 快速使用[](https://github.com/xiaolinbaba/Paper#%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8)

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

## 项目地址

github：[https://github.com/xiaolinbaba/Paper](https://github.com/xiaolinbaba/Paper)

demo：[https://paper.thus.chat/](https://paper.thus.chat/)

**Tags:** Markdown工具, 前端开发, 微信公众号编辑器

**Categories:** 开源项目

**Comments:** 

**Markdown爱好者:** 请问作者大大，能考虑增加自定义主题的功能吗？想换个自己喜欢的配色方案

**煮咖啡的IT狗:** 刚试了下幻灯片功能，效果不错啊~不过如果能支持数学公式就更完美了🤔

**爱吃西瓜的程序媛:** 试了一下果然和公众号编辑器等宽，再也不用反复调整格式了，就是数学公式不支持有点可惜😂

**猫奴程序员:** 这个单文件设计太棒了！直接在本地就能用，不用联网也不用安装其他东西，简洁实用👍

**码农小张:** 这个编辑器太适合我这种经常要写公众号的码农了，单文件离线用起来真方便！



---