Paper 编辑器简介

Paper 是一款轻量级微信公众号 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       	# 网站图标

🚀 使用场景

这个项目特别适合：

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

快速开始

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

常见样式

:::orange
浅橙色卡片： Paper 是一款轻量级微信公众号 Markdown 编辑器。现代化三栏布局，实时 Markdown 预览，响应式设计；支持大部分 Markdown 语法 (数学公式和 Mermaid除外,请在发布区进行手工渲染)，支持信息卡片。
:::

:::blue
**浅蓝色卡片：**Paper 是一款轻量级微信公众号 Markdown 编辑器。现代化三栏布局，实时 Markdown 预览，响应式设计；支持大部分 Markdown 语法 (数学公式和 Mermaid除外,请在发布区进行手工渲染)，支持信息卡片。

支持换行，支持图片。
:::

引用样式：Paper 是一款轻量级微信公众号 Markdown 编辑器。现代化三栏布局，实时 Markdown 预览，响应式设计；支持大部分 Markdown 语法 (数学公式和 Mermaid除外)，支持信息卡片。预览区与微信公众号编辑器等宽，所见即所得。欢迎使用👏！

:::info 信息卡片
这是一个信息卡片，支持粗体和斜体文本，可以包含多个段落和图片。

:::

# 这是一个 Python 代码块
def contains_number(s):
    return any(char.isdigit() for char in s)

test_string = "Hello123"
if contains_number(test_string):
    print("字符串包含数字")
else:
    print("字符串不包含数字")

常用网址表格	功能	推荐
Mermaid 渲染	Mermaid图渲染	🌟🌟🌟
数学公式渲染	数学公式渲染	🌟🌟🌟
Markdown语法速查	Markdown 语法速查	🌟🌟🌟🌟

<,,>

特别鸣谢

Paper Markdown 编辑器的设计灵感参考了两个项目jackywine, md.doocs.org，欢迎大家关注这两个项目，也感谢两个项目作者的付出，谢谢。

最后，本项目花费了不少精力，如果可以，请关注我的微信公众号，或加群讨论 Markdown 编辑器相关知识。感谢您的支持！