md2wechat

https://md2wechat.cn
Admin
A professional Markdown editor for WeChat Official Accounts that converts Markdown to formatted...
Tokens:13,928
Snippets:151
Trust Score:5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Image Steps Module Example

Source: https://md2wechat.cn

A module for illustrating step-by-step processes using images and descriptions, suitable for tutorials or guides.

```markdown
:::image-steps[操作步骤]
01 | 打开编辑器 | 先确定主题和文章结构，再开始写内容。 | https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png | 适合放后台、编辑器或操作截图
02 | 插入图片模块 | 用图文双栏、对比图或标注图，把截图和解释放在一起。 | https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png | 适合教程、产品介绍、案例拆解
03 | 检查手机阅读 | 最后确认在窄屏里仍然清楚、稳定、不拥挤。 | https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png | 适合做发布前核对 :::
```

--------------------------------

### Cases Module Example

Source: https://md2wechat.cn

Showcases selected case studies or examples, detailing the benefits and outcomes achieved.

```markdown
:::cases[案例精选]
品牌发布稿 | 阅读完成率 +38% | 用封面卡和数据卡更容易把重点讲清楚 | accent
销售方案稿 | 理解效率更高 | 用对比卡和步骤流减少解释成本 | default
:::
```

--------------------------------

### Pricing Module Example

Source: https://md2wechat.cn

Presents different pricing tiers or plans, outlining features and costs for each option.

```markdown
:::pricing[方案组合]
轻量版 | ￥199 | 主题排版 / 基础模块 / 日常内容 | default
专业版 | ￥599 | 高级模块 / 商业稿结构 / 更强展示力 | accent
:::
```

--------------------------------

### FAQ Module Example

Source: https://md2wechat.cn

A module for frequently asked questions, providing answers to common queries about the product or service.

```markdown
:::faq[常见问题]
这些模块只能在新主题里用吗？ | 不是，所有主题都会生效。
为什么不用硬双列？ | 因为微信正文窄，横向模块更稳。
:::
```

--------------------------------

### Markdown Code Block Example

Source: https://md2wechat.cn

Demonstrates how to create code blocks with syntax highlighting for various programming languages, using JavaScript as an example.

```markdown
### 代码块
我们支持多种语言的语法高亮，例如 JavaScript：
```
// A simple function to say hello
function sayHello(name) {
  console.log(`Hello, ${name}! Welcome to the best Markdown editor.`);
}

sayHello('Creator');

```

```

--------------------------------

### Call to Action (CTA) Module Example

Source: https://md2wechat.cn

A prominent call to action module designed to guide users towards a specific action, like starting with structured content modules.

```markdown
:::cta title: 如果你想把公众号内容做成稳定可复用的结构，可以直接从这套高级模块开始。
note: BUILD WITH STRUCTURE :::
```

--------------------------------

### Unordered and Ordered Lists Example

Source: https://md2wechat.cn

Demonstrates the syntax for creating unordered (bulleted) and ordered (numbered) lists in Markdown.

```markdown
**无序列表:**
* 简洁的设计哲学
* 强大的功能内核
* 流畅的用户体验

**有序列表:**
1. 撰写内容
2. 调整排版
3. 发布分享
```

--------------------------------

### Markdown List Examples

Source: https://md2wechat.cn

Shows how to create both unordered (bulleted) and ordered (numbered) lists in Markdown for structuring information.

```markdown
### 列表
**无序列表:**
  * • 简洁的设计哲学
  * • 强大的功能内核
  * • 流畅的用户体验


**有序列表:**
  1. 1. 撰写内容
  2. 2. 调整排版
  3. 3. 发布分享

```

--------------------------------

### Image Gallery Example

Source: https://md2wechat.cn

Showcases how to create an image gallery using a custom syntax. This is useful for displaying multiple related images.

```markdown
:::gallery[滑动浏览美景图片] [IMAGE:img_https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600_山景图片_5988] [IMAGE:img_https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600_海景图片_6064] [IMAGE:img_https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600_城市图片_6140] :::

```

--------------------------------

### Footnote Example

Source: https://md2wechat.cn

Demonstrates how to add footnotes to your Markdown content, with examples for simple footnotes and linking to external resources.

```markdown
这是一个需要脚注的例子[^1]。脚注的内容会自动出现在文章末尾。
这是一个引用了百度的脚注[^2]。
```

```markdown
[^1]: 脚注是对正文中某个词语或句子的补充说明。
[^2]: [百度一下](https://www.baidu.com)
```

--------------------------------

### Subscribe Module Example

Source: https://md2wechat.cn

Encourages readers to subscribe or share, with options for primary and secondary calls to action and a note for further engagement.

```markdown
:::subscribe label: 持续更新 title: 如果这篇对你有帮助，可以把这个系列收藏起来 subtitle: 我会持续更新公众号排版、AI 内容工作流和产品化复盘。
primary: 关注公众号
secondary: 转发给正在写长文的人
note: 下一篇继续拆个人品牌模块 :::
```

--------------------------------

### Markdown Table Example

Source: https://md2wechat.cn

Demonstrates how to create tables in Markdown for displaying structured data, such as features and their status.

```markdown
功能 | 状态 | 优先级  
---|---|---  
实时预览 | ✅ 已支持 | 高  
自定义主题 | 🚀 计划中 | 中  
图片上传 | 🚀 计划中 | 高  

```

--------------------------------

### Markdown Headings Example

Source: https://md2wechat.cn

Demonstrates the use of Markdown for creating headings from H1 to H6, essential for structuring content.

```markdown
# 这是一级标题 H1
## 这是二级标题 H2
### 这是三级标题 H3
#### 这是四级标题 H4
##### 这是五级标题 H5
###### 这是六级标题 H6
```

--------------------------------

### Image with Text Layout Example

Source: https://md2wechat.cn

An example of an image placed to the right of descriptive text, useful for tutorials or product explanations where visuals and text are closely linked.

```markdown
:::image-text layout: right eyebrow: 界面示意 title: 图和说明绑在一起，教程和方案会更容易读完 body: 双栏不是为了炫技，而是让截图、海报和解释留在同一个视线里，减少来回切换成本。 note: 适合产品截图、活动海报、界面讲解 image: https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png alt: 图文双栏示例图片 :::
```

--------------------------------

### Logos Module Example

Source: https://md2wechat.cn

Displays logos of partner brands or clients, used for building credibility and showcasing collaborations.

```markdown
:::logos[合作品牌]
Northstar | 增长团队
MoriLab | 内容品牌
SparkFlow | AI 工具
:::
```

--------------------------------

### Image Comparison Example

Source: https://md2wechat.cn

Shows how to present before-and-after comparisons using images, ideal for demonstrating UI changes or A/B testing results.

```markdown
:::image-compare eyebrow: 前后对比 title: 前后并排，差异会比长段解释更直接 left_title: 改版前 left_image: https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png right_title: 改版后 right_image: https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png note: 适合界面改版、海报优化、方案 A/B 对比 :::
```

--------------------------------

### Image Annotation Example

Source: https://md2wechat.cn

Demonstrates how to annotate images with specific points and descriptions, useful for highlighting key areas in screenshots or diagrams.

```markdown
:::image-annotate eyebrow: 拆解说明 title: 图片标注卡适合直接告诉读者重点该看哪里 note: 适合后台截图、海报拆解、页面结构分析 image: https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png alt: 图片标注卡示例
point: 01 | 24 | 24 | 主信息区 | 一进入页面先看到的核心判断和主标题
point: 02 | 74 | 36 | 指标区 | 适合讲关键数字、结果和变化
point: 03 | 56 | 76 | 行动区 | 适合解释按钮、入口和下一步动作 :::
```

--------------------------------

### Markdown Gallery Example

Source: https://md2wechat.cn

Demonstrates how to create a swipeable image gallery similar to WeChat Official Accounts. Each image can have a caption.

```markdown
:::gallery[滑动浏览美景图片]
![山景图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600)
![海景图片](https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600)
![城市图片](https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600)
:::
```

--------------------------------

### Markdown Link and Image Example

Source: https://md2wechat.cn

Illustrates how to create hyperlinks to external websites and embed images within Markdown content.

```markdown
### 链接与图片
这是一个指向开发者网站的链接：极客杰尼。
[IMAGE:img_https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png_图片示例_5817]

```

--------------------------------

### Applicability Notice Module Example

Source: https://md2wechat.cn

Provides guidance on when to use specific modules or features, outlining suitable content types, prerequisites, risks, and unsuitable use cases.

```markdown
:::notice[适用说明]
适合 | 干货长文、教程拆解、白皮书、活动总结 | 适合需要结构感和复用性的内容
前提 | 先把信息分层 | 不要把所有信息都塞进一个模块
风险 | 模块堆太多会抢正文 | 一篇文章保留 3 到 6 个重点模块更稳
不适合 | 特别短的快讯 | 这类内容通常一两个基础模块就够了 :::
```

--------------------------------

### AI Assistant and User Dialogue Example

Source: https://md2wechat.cn

Demonstrates a conversational format for AI interactions, suitable for FAQs, interviews, or product demos. Uses a simple role: message syntax.

```markdown
:::dialogue[AI助手与用户的对话]
用户: 你好！这个Markdown编辑器看起来很不错，能介绍一下主要功能吗？
AI: 您好！很高兴为您介绍。这是一款专为微信公众号设计的Markdown编辑器，主要功能包括：实时预览、代码高亮、一键复制富文本、多组主题和高级排版模块等。
用户: 那这个对话功能是新加的吗？支持哪些使用场景？
AI: 是的！对话功能是最新扩展的语法。适用场景很广泛：客服对话、访谈记录、教学问答、产品演示等。样式采用左右交替的气泡设计，非常适合微信阅读。
用户: 太棒了！语法使用起来简单吗？
AI: 非常简单！只需要用 `:::dialogue[标题]` 开始，`:::` 结束，中间用 `角色名: 对话内容` 的格式即可。支持中英文冒号，会自动生成美观的对话界面。
:::
```

--------------------------------

### Markdown Footnote Example

Source: https://md2wechat.cn

Shows how to add footnotes to Markdown content, which will appear at the end of the article.

```markdown
### 脚注
这是一个需要脚注的例子 [1] 。脚注的内容会自动出现在文章末尾。
这是一个引用了百度的脚注 [2] 。

```

--------------------------------

### People Module Example

Source: https://md2wechat.cn

Highlights key roles or individuals involved in a project or content piece, specifying their responsibilities.

```markdown
:::people[核心角色]
内容负责人 | 内容策略 | 负责把文章重点和节奏定下来 | accent
设计负责人 | 视觉把关 | 负责保证气质和细节不掉价 | default
:::
```

--------------------------------

### Metrics Module Example

Source: https://md2wechat.cn

Displays key results or metrics in a visually appealing format, highlighting improvements or key performance indicators.

```markdown
:::metrics[关键结果]
结构复用 | 34 模块 | 同一篇内容可切到不同主题 | accent
制作负担 | -42% | 固定骨架后，不再反复重搭版式 | default
:::
```

--------------------------------

### Blockquote Example

Source: https://md2wechat.cn

Illustrates how to create a standard blockquote in Markdown, often used for citations or highlighting specific text.

```markdown
> 这是一个标准的引用块。正如乔布斯所说：设计不仅仅是外观和感觉，设计是产品如何运作。
```

--------------------------------

### Verdict Module Example

Source: https://md2wechat.cn

Presents a final conclusion or verdict on a topic, emphasizing the core message or takeaway.

```markdown
:::verdict eyebrow: 最终判断 title: 真正的护城河不是模块数量，而是品牌表达系统 body: 模块必须解决新的阅读任务，否则只是换皮。
:::
```

--------------------------------

### Summary Module Example

Source: https://md2wechat.cn

A summary module that provides a concise takeaway message, highlighting key points and reinforcing the main idea of the content.

```markdown
:::summary eyebrow: 一句话总结
highlight: 先把结构搭稳，再让主题接管气质，排版就不会乱
body: 这样同一篇内容切到不同主题时，重点、证据和行动仍然是清楚的。
:::
```

--------------------------------

### Hero Module Example

Source: https://md2wechat.cn

The hero module is used for the main introductory section of a content piece, setting the theme and providing a strong opening statement.

```markdown
:::hero eyebrow: FEATURE THEME
meta: 2026.03
kicker: 先把结构搭稳
title: 模块负责信息骨架 | 主题负责阅读气质
subtitle: 34 个高级模块统一服务所有主题，让教程、方案、发布稿和长文都能更稳定地组织重点
image: https://cdn.gooo.ai/gen-images/86dc0e765c05351121f0014414cbfdbc075a425818a282f6749e779420146099.png
brand: md2wechat
tags: 结构化 | 可复用
:::
```

--------------------------------

### Resource Toolbox Module Example

Source: https://md2wechat.cn

A module that acts as a toolbox, providing links to templates, asset libraries, and APIs for content creation and automation.

```markdown
:::toolbox[资源工具箱]
模板 | 选题模板 | 适合日常内容策划和快速开稿 | https://md2wechat.com
资料 | 品牌素材库 | 放封面图、Logo 和活动物料 | https://github.com/geekjourneyx/md2wechat-skill
工具 | Markdown 转换 API | 适合接进自动化工作流 | https://md2wechat.com/api/convert :::
```

--------------------------------

### Markdown Table Example

Source: https://md2wechat.cn

A sample Markdown table demonstrating features, status, and priority. Supports text alignment within columns.

```markdown
| 功能 | 状态 | 优先级 |
| ------------ | :------- | :---: |
| 实时预览 | ✅ 已支持 | 高 |
| 自定义主题 | 🚀 计划中 | 中 |
| 图片上传 | 🚀 计划中 | 高 |
```

--------------------------------

### Basic Paragraphs and Inline Formatting Example

Source: https://md2wechat.cn

Shows standard paragraph text, inline code formatting, bold, and italic text.

```markdown
这是普通段落文本。我们相信，好的工具能让创作事半功倍。通过简化排版流程，您可以将更多精力投入到创造有价值的内容上。`代码内联` 也是支持的。
**这是加粗文本**，而 *这是斜体文本*。
```

--------------------------------

### Checklist Module Example

Source: https://md2wechat.cn

A checklist module for pre-publication review, helping ensure all necessary elements like structure, data, and links are in place.

```markdown
:::checklist[发布前检查]
done | 结构先搭好 | 先把目录、重点和结论摆出来
pending | 数据再补齐 | 关键数字和案例放进对应模块
warn | 链接和说明单独检查 | 避免手机里出现跳读和看不清 :::
```

--------------------------------

### Specifications Module Example

Source: https://md2wechat.cn

Displays technical specifications or details about a product or service, including target audience, delivery method, and update frequency.

```markdown
:::specs[参数信息]
适用对象 | 内容团队 / 自媒体 / 企业市场 | 更适合长文和专题稿
交付方式 | 在线编辑器 + API | 既能手工写，也能接自动化
更新频率 | 持续迭代 | 主题和模块会一起升级 :::
```

--------------------------------

### Audience Fit Module Example

Source: https://md2wechat.cn

Helps define the target audience for a piece of content, specifying who it's suitable for and who might not benefit from it.

```markdown
:::audience-fit title: 这篇适合谁
fit: 正在写长文的人 | 想建立个人品牌的人 | 需要稳定交付内容的人
avoid: 只发短讯的人 | 不需要结构化表达的人
:::
```

--------------------------------

### Quote Module Example

Source: https://md2wechat.cn

Highlights a key quote or statement, often used for testimonials, expert opinions, or impactful phrases.

```markdown
:::quote eyebrow: 核心观点 quote: 模块不是为了让页面更满，而是为了让读者更快找到判断、证据和下一步。
source: 内容设计原则
note: 适合金句、采访摘录、文章结论
:::
```

--------------------------------

### Cards Module Example

Source: https://md2wechat.cn

A module for presenting content in distinct card-like sections, categorized into parts like opening, information graphics, and evidence.

```markdown
:::cards[高级排版模块]
PART 01 | 开场模块 | 先交代判断和阅读入口 | accent
PART 02 | 信息图模块 | 先把一句判断放大成视觉摘要 | default
PART 03 | 证据模块 | 用数据、对比、步骤支撑结论 | default
:::
```

--------------------------------

### Table of Contents Module Example

Source: https://md2wechat.cn

A module for creating a table of contents, helping readers navigate long articles by outlining the structure and key sections.

```markdown
:::toc[阅读导航]
01 | 先看结构 | 用目录先告诉读者这篇文章怎么读
02 | 再看重点 | 用观点、数据和案例把判断提出来
03 | 最后看行动 | 用清单、工具和说明把内容落到可执行 :::
```

--------------------------------

### Author Information Example

Source: https://md2wechat.cn

Provides details about the author, including their name, profession, focus areas, website, and a call to action for their公众号.

```markdown
你好，我是 **极客杰尼**。
一名老实憨厚的技术人，大厂后端工程师，目前专注于分享 AI 编程与 AI 工具。
希望这款小工具能为你的内容创作之旅带来便利。
- **个人网站**: [geeki.cc](https://www.geeki.cc/)
- **公众号**: 极客杰尼
> 欢迎关注我的公众号，获取更多 AI 编程与 AI 工具的分享，免费送 AI 编程学习指南。
![极客杰尼公众号二维码 - AI编程与工具分享](https://youke1.picui.cn/s1/2025/07/29/6887bac114161.jpg "扫码关注极客杰尼公众号")
> 进入公众号，点击菜单，加我的微信，诚邀你进入天使股东交流群，有任何问题高优跟进，更有机会定制专属的主题。
感谢使用！
```

--------------------------------

### JavaScript Code Snippet Example

Source: https://md2wechat.cn

A basic JavaScript function to demonstrate syntax highlighting within the editor. This is useful for technical content.

```javascript
// A simple function to say hello
function sayHello(name) {
  console.log(`Hello, ${name}! Welcome to the best Markdown editor.`);
}

sayHello('Creator');

```

--------------------------------

### Part Module Example

Source: https://md2wechat.cn

Divides content into distinct parts, often used to structure longer articles or sections within a larger piece.

```markdown
:::part index: 01 title: 正文能力也要接进同一套系统 subtitle: TYPOGRAPHY · MARKDOWN · STRUCTURE :::
```

--------------------------------

### JavaScript Function Example

Source: https://md2wechat.cn

A basic JavaScript function demonstrating console logging. This snippet is for illustrating code block syntax highlighting.

```javascript
// A simple function to say hello
function sayHello(name) {
  console.log(`Hello, ${name}! Welcome to the best Markdown editor.`);
}

sayHello('Creator');
```

--------------------------------

### Long Image Display Example

Source: https://md2wechat.cn

Demonstrates how to use a 'longimage' container for displaying very tall images like infographics or flowcharts, allowing for scrolling.

```markdown
:::longimage[产品架构设计图] [IMAGE:img_https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=1200_系统架构流程图_6292] :::
:::longimage[用户体验流程图] [IMAGE:img_https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=700&h=1000_完整的用户旅程地图_6402] :::

```

--------------------------------

### Author Card Module Example

Source: https://md2wechat.cn

Displays author information including name, role, bio, tags, and links, suitable for articles or blog posts.

```markdown
:::author-card name: 极客旅程 role: 独立开发者 / 内容产品 bio: 长期写 AI 工具、内容系统和产品增长，关注怎么把复杂工作流做成可复用资产。
tags: AI 工具 | 内容系统 | 独立产品
note: 关注我，持续看产品和内容系统的真实打磨过程
link: md2wechat.com :::
```

--------------------------------

### Product Manager and Developer Dialogue Example

Source: https://md2wechat.cn

Illustrates a technical discussion format, showing a dialogue between a Product Manager and a Developer regarding feature implementation.

```markdown
:::dialogue[产品经理与开发者的技术讨论]
PM: 这次需求要增加一个对话组件，用户反馈很需要这个功能。
开发: 好的，我看了一下现有架构。可以参考GFM提示框的实现方式，在markdown-renderer中添加自定义语法解析。
PM: 大概需要多长时间完成？有什么技术难点吗？
开发: 预计2-3小时可以完成。主要工作是语法解析、样式设计和渲染逻辑。难点是要保证样式与整体设计风格一致。
PM: 那样式设计有什么想法？
开发: 我计划采用左右交替的气泡布局，配上圆形头像标识，使用主题的橙色系配色，确保在微信中显示效果良好。
PM: 听起来很棒！那就按这个方案执行吧。
:::
```

--------------------------------

### Long Image Display Example

Source: https://md2wechat.cn

Showcases a container for displaying very long images like architecture diagrams or flowcharts, with built-in scrolling.

```markdown
:::longimage[产品架构设计图]
![系统架构流程图](https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=1200)
:::
```

```markdown
:::longimage[用户体验流程图]
![完整的用户旅程地图](https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=700&h=1000)
:::
```

--------------------------------

### Infographic Statement Module Example

Source: https://md2wechat.cn

A module designed to present a single, impactful statement as a visual infographic, suitable for highlighting key takeaways.

```markdown
:::infographic type: statement eyebrow: 文章信息图 title: 让|一句判断|先被读者看到 subtitle: 不重复正文，而是把最重要的判断排成一张文字视觉摘要
quote: 一张信息图只讲一个判断。
note: 适合教程、升级发布和中段转场
:::
```

--------------------------------

### Series Module Example

Source: https://md2wechat.cn

Used to group related articles into a series, providing context with issue number, title, description, tags, and links to next/previous entries.

```markdown
:::series name: 内容产品手记 issue: 07 title: 让每篇文章都像同一个品牌写出来 desc: 这个系列记录从排版、结构到自动化发布的完整打磨过程。
tags: 公众号 | 品牌排版 | 内容系统
next: 下一篇：个人品牌模块怎么搭 :::
```

--------------------------------

### GFM Alert Boxes Example

Source: https://md2wechat.cn

Shows various GitHub Flavored Markdown (GFM) alert box types (Note, Tip, Important, Warning, Caution) for highlighting different kinds of information.

```markdown
> [!NOTE] **提示**: 这是一个提示块，适合用来补充说明重要信息。
> [!TIP] **技巧**: 这是一个技巧块，可以分享一些小窍门和最佳实践。
> [!IMPORTANT] **重要**: 这里是重要信息，需要特别关注的内容。
> [!WARNING] **警告**: 注意潜在的风险，请谨慎操作。
> [!CAUTION] **注意**: 这是危险提醒，操作前请确认无误。
```

--------------------------------

### Markdown Text Formatting Examples

Source: https://md2wechat.cn

Illustrates various text formatting options available in Markdown, including paragraphs, bold, italics, inline code, blockquotes, and GFM (GitHub Flavored Markdown) alert boxes.

```markdown
### 文本与段落
这是普通段落文本。我们相信，好的工具能让创作事半功倍。通过简化排版流程，您可以将更多精力投入到创造有价值的内容上。`代码内联` 也是支持的。
**这是加粗文本** ，而 _这是斜体文本_ 。
### 引用
> 这是一个标准的引用块。正如乔布斯所说：设计不仅仅是外观和感觉，设计是产品如何运作。
### GFM 提示框
支持 GitHub 风格的提示框，每种类型都有专属的图标和颜色主题：
> **提示** : 这是一个提示块，适合用来补充说明重要信息。
> **技巧** : 这是一个技巧块，可以分享一些小窍门和最佳实践。
> **重要** : 这里是重要信息，需要特别关注的内容。
> **警告** : 注意潜在的风险，请谨慎操作。
> **注意** : 这是危险提醒，操作前请确认无误。

```

--------------------------------

### Markdown to WeChat API Conversion

Source: https://md2wechat.cn

Example of using curl to convert Markdown content to WeChat format via a RESTful API. Requires specifying the markdown content and theme in JSON format.

```bash
# 转换 Markdown 为微信格式
curl -X POST /api/convert \
  -H "Content-Type: application/json" \
  -d '{"markdown": "# 标题", "theme": "default"}'
```

--------------------------------

### AI Assistant and User Dialogue

Source: https://md2wechat.cn

Demonstrates the dialogue syntax for creating Q&A style conversations between an AI assistant and a user. Use 'A' for the AI assistant and 'User' for the user's input.

```Markdown
你好！这个Markdown编辑器看起来很不错，能介绍一下主要功能吗？
您好！很高兴为您介绍。这是一款专为微信公众号设计的Markdown编辑器，主要功能包括：实时预览、代码高亮、一键复制富文本、多组主题和高级排版模块等。
A 用
那这个对话功能是新加的吗？支持哪些使用场景？
是的！对话功能是最新扩展的语法。适用场景很广泛：客服对话、访谈记录、教学问答、产品演示等。样式采用左右交替的气泡设计，非常适合微信阅读。
A 用
太棒了！语法使用起来简单吗？
非常简单！只需要用 `:::dialogue[标题]` 开始，`:::` 结束，中间用 `角色名: 对话内容` 的格式即可。支持中英文冒号，会自动生成美观的对话界面。
```

--------------------------------

### Basic Markdown Formatting

Source: https://md2wechat.cn

Demonstrates standard Markdown syntax for headings, bold, italics, inline code, and paragraphs. Supports GitHub Flavored Markdown (GFM) for enhanced features like tip boxes.

```markdown
# 这是一级标题 H1
## 这是二级标题 H2
### 这是三级标题 H3
#### 这是四级标题 H4
##### 这是五级标题 H5
###### 这是六级标题 H6

这是普通段落文本。我们相信，好的工具能让创作事半功倍。通过简化排版流程，您可以将更多精力投入到创造有价值的内容上。`代码内联` 也是支持的。

**这是加粗文本**，而 *这是斜体文本*。

> 这是一个标准的引用块。正如乔布斯所说：设计不仅仅是外观和感觉，设计是产品如何运作。

支持 GitHub 风格的提示框，每种类型都
```

--------------------------------

### Smart Dialogue Syntax

Source: https://md2wechat.cn

Shows how to create interactive dialogues between different roles (e.g., AI Assistant, User, Product Manager, Developer) using a custom Markdown syntax. This is ideal for showcasing conversations, Q&A, or interviews.

```markdown
:::dialogue[AI助手与用户的对话]
你好！这个Markdown编辑器看起来很不错，能介绍一下主要功能吗？
您好！很高兴为您介绍。这是一款专为微信公众号设计的Markdown编辑器，主要功能包括：实时预览、代码高亮、一键复制富文本、多组主题和高级排版模块等。
A 用
那这个对话功能是新加的吗？支持哪些使用场景？
是的！对话功能是最新扩展的语法。适用场景很广泛：客服对话、访谈记录、教学问答、产品演示等。样式采用左右交替的气泡设计，非常适合微信阅读。
A 用
太棒了！语法使用起来简单吗？
非常简单！只需要用 `:::dialogue[标题]` 开始，`:::` 结束，中间用 `角色名: 对话内容` 的格式即可。支持中英文冒号，会自动生成美观的对话界面。
A
:::

:::dialogue[产品经理与开发者的技术讨论]
P
这次需求要增加一个对话组件，用户反馈很需要这个功能。
好的，我看了一下现有架构。可以参考GFM提示框的实现方式，在markdown-renderer中添加自定义语法解析。
开 P
大概需要多长时间完成？有什么技术难点吗？
预计2-3小时可以完成。主要工作是语法解析、样式设计和渲染逻辑。难点是要保证样式与整体设计风格一致。
开 P
那样式设计有什么想法？
我计划采用左右交替的气泡布局，配上圆形头像标识，使用主题的橙色系配色，确保在微信中显示效果良好。
开 P
听起来很棒！那就按这个方案执行吧。
:::
```

--------------------------------

### Basic Markdown Formatting

Source: https://md2wechat.cn

Shows standard Markdown syntax for headings, bold, italics, and blockquotes. Supports inline code.

```Markdown
### 标题
# 这是一级标题 H1
## 这是二级标题 H2
### 这是三级标题 H3
#### 这是四级标题 H4
##### 这是五级标题 H5
###### 这是六级标题 H6
模块
#### 模块的任务，是把内容拆成更好读的结构
核心观点
模块不是为了让页面更满，而是为了让读者更快找到判断、证据和下一步。
—— 内容设计原则
适合金句、采访摘录、文章结论
界面示意
图和说明绑在一起，教程和方案会更容易读完
双栏不是为了炫技，而是让截图、海报和解释留在同一个视线里，减少来回切换成本。
适合产品截图、活动海报、界面讲解
前后对比
前后并排，差异会比长段解释更直接
改版前
改版后
适合界面改版、海报优化、方案 A/B 对比
拆解说明
图片标注卡适合直接告诉读者重点该看哪里
010203
01
主信息区
一进入页面先看到的核心判断和主标题
02
指标区
适合讲关键数字、结果和变化
03
行动区
适合解释按钮、入口和下一步动作
适合后台截图、海报拆解、页面结构分析
阅读导航
01
先看结构
用目录先告诉读者这篇文章怎么读
02
再看重点
用观点、数据和案例把判断提出来
03
最后看行动
用清单、工具和说明把内容落到可执行
发布前检查
✓
~~结构先搭好~~
先把目录、重点和结论摆出来
•
数据再补齐
关键数字和案例放进对应模块
!
链接和说明单独检查
避免手机里出现跳读和看不清
资源工具箱
模板
↗
选题模板
适合日常内容策划和快速开稿
资料
↗
品牌素材库
放封面图、Logo 和活动物料
工具
↗
Markdown 转换 API
适合接进自动化工作流
参数信息
适用对象
内容团队 / 自媒体 / 企业市场
更适合长文和专题稿
交付方式
在线编辑器 + API
既能手工写，也能接自动化
更新频率
持续迭代
主题和模块会一起升级
操作步骤
01
打开编辑器
先确定主题和文章结构，再开始写内容。
适合放后台、编辑器或操作截图
02
插入图片模块
用图文双栏、对比图或标注图，把截图和解释放在一起。
适合教程、产品介绍、案例拆解
03
检查手机阅读
最后确认在窄屏里仍然清楚、稳定、不拥挤。
适合做发布前核对
适用说明
适合
干货长文、教程拆解、白皮书、活动总结
适合需要结构感和复用性的内容
前提
先把信息分层
不要把所有信息都塞进一个模块
风险
模块堆太多会抢正文
一篇文章保留 3 到 6 个重点模块更稳
不适合
特别短的快讯
这类内容通常一两个基础模块就够了
### 文本与段落
这是普通段落文本。我们相信，好的工具能让创作事半功倍。通过简化排版流程，您可以将更多精力投入到创造有价值的内容上。`代码内联` 也是支持的。
**这是加粗文本** ，而 _这是斜体文本_ 。
### 引用
> 这是一个标准的引用块。正如乔布斯所说：设计不仅仅是外观和感觉，设计是产品如何运作。
```
Tokens:
Raw