WeixLayout - 微信公众号 Markdown 编辑器

一个 Chrome 浏览器插件，让你在微信公众号后台使用 Markdown 写作，支持实时预览、多主题切换、代码高亮、数学公式和流程图。

功能特性

• Markdown 编辑 - CodeMirror 6 编辑器，支持语法高亮
• 实时预览 - 边写边看，所见即所得
• 一键插入 - 直接插入微信公众号编辑器，无需复制粘贴
• 多主题切换 - 12 个精选排版主题
• 代码高亮 - 6 个代码配色方案
• 数学公式 - LaTeX 语法，KaTeX 渲染
• 流程图 - Mermaid 语法支持
• 图片上传 - 微信公众号素材库，无需第三方图床
• 自定义 CSS - 按需调整样式
• 草稿保存 - 自动保存，不怕丢失

安装

开发者模式安装

1. 克隆仓库

   git clone https://github.com/your-username/weixlayout.git

2. 打开 Chrome，访问 chrome://extensions/

3. 开启右上角「开发者模式」

4. 点击「加载已解压的扩展程序」，选择项目目录

Chrome 商店安装

即将上线

使用方法

1. 打开微信公众号后台 (mp.weixin.qq.com)
2. 进入文章编辑页面
3. 点击浏览器右上角插件图标，打开侧边栏
4. 在左侧编写 Markdown
5. 选择喜欢的主题
6. 点击「插入文章」按钮

Markdown 语法支持

基础语法

# 一级标题
## 二级标题
### 三级标题

**粗体** *斜体* ~~删除线~~

- 无序列表
- 项目二

1. 有序列表
2. 项目二

> 引用文本

[链接文字](https://example.com)

![图片描述](https://example.com/image.png)

代码块

```javascript
function hello() {
  console.log('Hello, World!');
}
```

数学公式

行内公式: $E = mc^2$

块级公式:
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + ... + x_n
$$

流程图

```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
```

主题列表

主题	风格	适用场景
默认	简洁黑白	通用
橙心	橙色活力	科技、产品
绿意	清新绿	生活、健康
蓝莹	专业蓝	技术、商务
姹紫	优雅紫	设计、文艺
红绯	热情红	营销、节日
墨黑	深沉黑	技术深度文
科技蓝	科技感	AI、互联网
简	极简风	任何场景
微信风格	官方风	官方感
前端之巅	技术风	前端开发
山吹	暖黄色	生活、情感

项目结构

weixlayout/
├── manifest.json              # 插件配置
├── background.js              # Service Worker
├── content.js                 # 内容脚本
├── sidepanel/                 # 侧边栏 UI
│   ├── index.html
│   ├── style.css
│   └── app.js
├── lib/                       # 第三方库
├── themes/                    # 主题样式
├── utils/                     # 工具函数
└── images/                    # 插件图标

开发

环境要求

• Node.js 18+
• Chrome 116+ (支持 Side Panel API)

本地开发

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建生产版本
npm run build

调试

1. 在 chrome://extensions/ 点击「Service Worker」查看后台日志
2. 在侧边栏右键「检查」打开开发者工具
3. 在微信页面 F12 查看 content.js 日志

技术栈

• 编辑器: CodeMirror 6
• Markdown 解析: marked
• 代码高亮: highlight.js
• 数学公式: KaTeX
• 流程图: Mermaid
• 图床: 微信公众号素材库 API

许可证

MIT License

致谢

• markdown-nice - 设计灵感
• wechat-layout - 技术参考