最全 Markdown

Markdown2Wechat 工具使用指南

请使用 Chrome 浏览器。
请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。

1 Markdown Nice 简介

Markdown Nice 是一款支持自定义样式的 Markdown 编辑器，核心功能包括：

  • 支持微信公众号、知乎和稀土掘金平台排版
  • 支持以 PDF 格式导出文件
  • 支持以 Markdown 格式导出文件

2 主题

主题预览与获取：Markdown Nice 主题库
欢迎提交主题，提供更多文章示例~~

3 通用语法

3.1 标题

在文字前添加不同数量的 # 可生成对应层级的标题，示例：

1
2
3
# 一级标题
## 二级标题
### 三级标题

3.2 无序列表

在符号 - 后加空格即可创建无序列表；通过在 - 前添加空格控制列表层级（微信最多支持二级列表）。
示例：

1
2
3
4
5
6
7
8
9
10
# 无层级列表
- 无序列表 1
- 无序列表 2
- 无序列表 3

# 带层级列表（微信支持二级）
- 无序列表 1
- 无序列表 2
  - 无序列表 2.1
  - 无序列表 2.2

3.3 有序列表

在数字+. 后加空格，输入内容即可创建有序列表，示例：

1
2
3
1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

3.4 粗体和斜体

  • 粗体：需加粗文字前后各加 2 个 *
  • 斜体：需斜体文字前后各加 1 个 *
  • 粗体+斜体：需操作文字前后各加 3 个 *

示例：

1
2
3
**这个是粗体**
*这个是斜体*
***这个是粗体加斜体***

注：由于 commonmark 标准，可能会导致加粗效果与预期不一致，例如：
**今天天气好晴朗，**处处好风光。
此为正常现象，详情可参考 加粗 Issue。

3.5 链接

微信公众号仅支持公众号文章链接（域名为 https://mp.weixin.qq.com/ 的合法链接），使用示例：
「对于该论述，欢迎读者查阅之前发过的文章，你是《未来世界的幸存者》么？」
（链接需替换为实际公众号文章 URL，格式：[文章标题](https://mp.weixin.qq.com/xxx)）

3.6 引用

在符号 > 后书写文字，可包含标题、链接、图片、粗体、斜体等内容；多个 > 可生成多级引用。

一级引用

1
2
3
4
5
> 一级引用示例
> 读一本好书，就是在和高尚的人谈话。 --歌德
> [Markdown Nice 最全功能介绍](https://preview.mdnice.com/themes/)
> ![这里写图片描述](https://shub.weiyan.tech/md2html/markdown.png)
> M 这里写图片描述

二级引用

1
2
3
4
5
>> 二级引用示例
>> 读一本好书，就是在和高尚的人谈话。 --歌德
>> [Markdown Nice 最全功能介绍](https://preview.mdnice.com/themes/)
>> ![这里写图片描述](https://shub.weiyan.tech/md2html/markdown.png)
>> M 这里写图片描述

三级引用

1
2
3
4
5
>>> 三级引用示例
>>> 读一本好书，就是在和高尚的人谈话。 --歌德
>>> [Markdown Nice 最全功能介绍](https://preview.mdnice.com/themes/)
>>> ![这里写图片描述](https://shub.weiyan.tech/md2html/markdown.png)
>>> M 这里写图片描述

3.7 分割线

在一行中使用 3 个以上减号（---）创建分隔线，需在分隔线上方空一行，示例：

（空行）

3.8 删除线

在需删除的文字前后各加 2 个 ~，示例：

1
~~这是要被删除的内容。~~

3.9 表格

使用冒号（:）定义表格对齐方式（左对齐、居中、右对齐）；宽度过长的表格可滚动，可在自定义主题中调节宽度。

基础表格（默认对齐）

1
2
3
4
5
| 姓名     | 年龄 | 工作         |
| ---      | --- | ---          |
| 小可爱   | 18  | 吃可爱多     |
| 小小勇敢 | 20  | 爬棵勇敢树   |
| 小小小机智| 22  | 看一本机智书 |

宽表格（支持滚动）

1
2
3
4
5
| 姓名     | 年龄 | 工作         | 邮箱          | 手机         |
| ---      | --- | ---          | ---           | ---          |
| 小可爱   | 18  | 吃可爱多     | lovely@test.com | 18812345678 |
| 小小勇敢 | 20  | 爬棵勇敢树   | brave@test.com  | 17712345678 |
| 小小小机智| 22  | 看一本机智书 | smart@test.com  | 16612345678 |

3.10 图片

基础用法

  • 行内图片（无图例）：![这里写图片描述](图片URL)
  • 带图例图片：![这里写图片描述](图片URL) + 换行标注 M 这里写图片描述

示例：

1
2
![这里写图片描述](https://shub.weiyan.tech/md2html/markdown.png)
M 这里写图片描述

尺寸控制

  • 同时设置宽高：![描述](图片URL =宽x高)
  • 仅设宽度（推荐百分比）：![描述](图片URL =百分比x)

示例：

1
2
3
4
5
![同时设置宽度和高度](https://shub.weiyan.tech/md2html/markdown.png =150x150)
M↓ 同时设置宽度和高度

![只设置宽度，推荐使用百分比](https://shub.weiyan.tech/md2html/markdown.png =40%x)
M↓ 只设置宽度，推荐使用百分比

注：此尺寸语法为工具特有，其他 Markdown 编辑器不完全通用。

格式与上传

  • 支持格式：jpg、png、gif、svg（svg 仅微信公众平台可用）
  • 上传方式：支持图片拖拽、截图粘贴上传，上传时使用当前选择的图床
  • 图床说明：网站默认支持「图壳」图床，失败率低，但仅保存 1 天用于排版
  • 安全提示：仅支持 HTTPS 图片；粘贴到微信/知乎/掘金时，图片会自动上传至平台服务器，无需担心丢失

图片嵌套链接（推荐卡片效果）

示例：

1
2
3
[<img src="图片URL" alt="描述">](文章链接)
wow, you can really dance
[Markdown Nice 最全功能介绍](https://preview.mdnice.com/themes/)

4 特殊语法

4.1 脚注

支持平台：微信公众号、知乎
与链接的区别：

  • 链接格式：[文字](链接URL)
  • 脚注格式：[文字](脚注解释 "脚注名字")

示例：

1
2
有人认为在大前端时代 的背景下，移动端开发(Android、IOS)将逐步退出历史舞台。[2]
全栈工程师 在业务开发流程中起到了至关重要的作用。[3]

脚注内容请拉到文档最下方查看。

4.2 代码块

支持平台：微信公众号、知乎

行内代码

用反引号（`）包裹代码，示例：

1
Use the `printf()` function.

代码块（高亮）

在代码块前后各加 3 个反引号（```），第一行反引号后标注代码语言，示例：

1
2
3
4
5
6
7
// FileName: HelloWorld.java
public class HelloWorld {
    // Java 入口程序，程序从此入口
    public static void main(String[] args) {
        System.out.println("Hello,World!"); // 向控制台打印一条语句
    }
}

支持的语言种类

bash、clojure、cpp、cs、css、dart、dockerfile、diff、erlang、go、gradle、groovy、haskell、java、javascript、json、julia、kotlin、lisp、lua、makefile、markdown、matlab、objectivec、perl、php、python、r、ruby、rust、scala、shell、sql、swift、tex、typescript、verilog、vhdl、xml、yaml

微信代码主题注意事项

  • 带行号且不换行，代码大小与微信官方一致
  • 必须标注代码语言，否则无法高亮
  • 粘贴到公众号后，需用鼠标点击代码块内外一次，完成高亮
  • diff 效果：不能与其他语言高亮同时显示，需切换至「微信代码主题以外的主题」才能查看，示例：
    1
    2
    + 新增项
    - 删除项

其他主题特性

  • 不带行号，可自定义是否换行
  • 代码大小与当前编辑器一致

4.3 数学公式

支持平台：微信公众号、知乎

行内公式

用 $ 包裹公式，示例：

1
这个化学公式：$Hg^{2+} \stackrel{I^{-}}{\to } HgI_{2} \stackrel{I^{-}}{\to }[Hg^{II} I_{4}]^{2-}$

块公式

用 $$ 包裹公式，示例：

1
2
3
4
$$H\left(D_{2}\right)=-\left(\frac{2}{4} log _{2} \frac{2}{4}+\frac{2}{4} log _{2} \frac{2}{4}\right)=1$$

矩阵：
$$\left(\begin{array}{ccccc} 1 & a_{1} & a_{1}^{2} & \cdots & a_{1}^{n} \\ 1 & a_{2} & a_{2}^{2} & \cdots & a_{2}^{n} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & a_{m} & a_{m}^{2} & \cdots & a_{m}^{n} \end{array}\right)$$

微信兼容方案

微信不原生支持数学公式，工具会自动将公式转成 SVG 格式插入，矢量图不失真。

注意：若公式量过大，Chrome 浏览器粘贴后可能无响应，Firefox 浏览器可稳定成功。

4.4 TOC（目录）

支持平台：微信公众号、知乎

  • TOC 全称：Table of Content（目录），可自动列出全部标题
  • 用法：在文档开头添加 [TOC]
  • 微信限制：由于微信仅支持二级列表，工具仅显示二级标题和三级标题

4.5 注音符号

支持平台：微信公众号
示例：

1
2
hē hē hē hē
Markdown Nice 这么好用，简直是喜大普奔呀！

4.6 横屏滑动幻灯片

支持平台：微信公众号
语法：用 <![](图片1URL),![](图片2URL)> 包裹多张图片，示例：

1
2
<![](图片1URL),![](图片2URL),![](图片3URL)>
<<< 左右滑动见更多 >>>

5 其他语法

5.1 HTML

支持原生 HTML 语法，需使用内联样式，示例：

1
2
<div style="color: orange; text-align: center;">橙色居中</div>
<div style="color: orange; text-align: right;">橙色居右</div>

5.2 UML

工具不支持 UML 语法，推荐使用开源工具 draw.io 制作 UML 图后，导出图片再导入编辑器。

5.3 更多文档

更多使用细节可参考：Markdown Nice 官方文档

参考资料

[1] 加粗 Issue：https://github.com/markdown-it/markdown-it/issues/410
[2] Front-end web development：https://en.wikipedia.org/wiki/Front-end_web_development
[3] 什么是全栈工程师：是指掌握多种技能，并能利用多种技能独立完成产品的人。
[4] 更多文档：https://preview.mdnice.com/articles/