关于Markdown编辑器语法参考指南

Xinyi 发表于 2025-3-8 23:21:37

<p>Vditor 是一款<strong>所见即所得</strong>编辑器，支持 <em>Markdown</em>。</p>
<ul>
<li>
<p>不熟悉 Markdown 可使用工具栏或快捷键进行排版</p>
</li>
<li>
<p>熟悉 Markdown 可直接排版，也可切换为分屏预览</p>
<p>同时也欢迎向我们提出建议或报告问题，谢谢 ❤️</p>
</li>
</ul>
<h2>教程</h2>
<p>这段内容展示了在内容里面一些排版格式，比如：</p>
<ul>
<li><strong>加粗</strong> - <code>**加粗**</code></li>
<li><em>倾斜</em> - <code>*倾斜*</code></li>
<li><del>删除线</del> - <code>~~删除线~~</code></li>
<li><code>Code 标记</code> - <code>Code 标记</code></li>
<li>超级链接 - <code>超级链接</code></li>
<li>xinyi@01ants.com - <code>(mailto:xinyi@01ants.com)</code></li>
</ul>
<h3>提及用户</h3>
<p>@Xinyi 通过 <code>@User</code> 可以在内容中提及用户，被提及的用户将会收到系统通知。</p>
<blockquote>
<p>NOTE:</p>
<ol>
<li>@用户名之后需要有一个<strong>空格</strong></li>
<li>新手没有艾特的功能权限</li>
</ol>
</blockquote>
<h3>表情符号 Emoji</h3>
<p>支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 <code>:</code> 触发自动完成，可在个人设置中设置常用表情。</p>
<h4>一些表情例子</h4>
<p>? ? ? ? ? ?? ? ? ?<br />
? ? ? ? ? ? ❓ ? ❤️ ☕️ ? ? ? ? ?</p>
<h3>大标题 - Heading 3</h3>
<p>你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。</p>
<blockquote>
<p>NOTE: 别忘了 # 后面需要有空格！</p>
</blockquote>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3>图片</h3>
<pre><code>!alt 文本(http://image-path.png)
!alt 文本(http://image-path.png "图片 Title 值")
</code></pre>
<p>支持复制粘贴直接上传。</p>
<h3>代码块</h3>
<h4>普通</h4>
<pre><code>*emphasize* **strong**
_emphasize_ __strong__
var a = 1
</code></pre>
<h4>语法高亮支持</h4>
<p>如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:</p>
<h5>展示Go 代码高亮</h5>
<pre><code class="language-go">package main

import "fmt"

func main() {
fmt.Println("Hello, 信蚁论坛！")
}
</code></pre>
<h5>展示Java 高亮</h5>
<pre><code class="language-java">public class HelloWorld {

public static void main(String[] args) {
   System.out.println("Hello 信蚁论坛！");
}

}
</code></pre>
<p>Tip: 语言名称支持下面这些: <code>ruby</code>, <code>python</code>, <code>js</code>, <code>html</code>, <code>erb</code>, <code>css</code>, <code>coffee</code>, <code>bash</code>, <code>json</code>, <code>yml</code>, <code>xml</code> ...</p>
<h3>有序、无序、任务列表</h3>
<h4>无序列表</h4>
<ul>
<li>Java
<ul>
<li>Spring
<ul>
<li>IoC</li>
<li>AOP</li>
</ul>
</li>
</ul>
</li>
<li>Go
<ul>
<li>gofmt</li>
<li>Wide</li>
</ul>
</li>
<li>Node.js
<ul>
<li>Koa</li>
<li>Express</li>
</ul>
</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>Node.js
<ol>
<li>Express</li>
<li>Koa</li>
<li>Sails</li>
</ol>
</li>
<li>Go
<ol>
<li>gofmt</li>
<li>Wide</li>
</ol>
</li>
<li>Java
<ol>
<li>Latke</li>
<li>IDEA</li>
</ol>
</li>
</ol>
<h4>任务列表</h4>
<ul>
<li class="vditor-task vditor-task--done"><input checked="" disabled="" type="checkbox" /> 发布 Sym</li>
<li class="vditor-task vditor-task--done"><input checked="" disabled="" type="checkbox" /> 发布 Solo</li>
<li class="vditor-task"><input disabled="" type="checkbox" /> 预约牙医</li>
</ul>
<h3>表格</h3>
<p>如果需要展示数据什么的，可以选择使用表格。</p>
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<h3>隐藏细节</h3>
<details open="false">
<summary>点我展开信蚁论坛网址。</summary>
<p>www.01ants.com</p>
</details>
<h3>段落</h3>
<p>空行可以将内容进行分段，便于阅读。（这是第一段）</p>
<p>使用空行在 Markdown 排版中相当重要。（这是第二段）</p>
<h3>链接引用</h3>
<p>链接文本https://b3log.org</p>
<pre><code>[链接文本][信蚁论坛]

[链接标识]: https://01ants.com
</code></pre>
<h3>数学公式</h3>
<p>多行公式块：</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mfrac>
<mn>1</mn>
<mrow>
   <mrow data-mjx-texclass="OPEN">
   <mo minsize="1.623em" maxsize="1.623em">(</mo>
   </mrow>
   <msqrt>
   <mi>ϕ</mi>
   <msqrt>
      <mn>5</mn>
   </msqrt>
   </msqrt>
   <mo>−</mo>
   <mi>ϕ</mi>
   <mrow data-mjx-texclass="CLOSE">
   <mo minsize="1.623em" maxsize="1.623em">)</mo>
   </mrow>
   <msup>
   <mi>e</mi>
   <mrow>
      <mfrac>
         <mn>2</mn>
         <mn>5</mn>
      </mfrac>
      <mi>π</mi>
   </mrow>
   </msup>
</mrow>
</mfrac>
<mo>=</mo>
<mn>1</mn>
<mo>+</mo>
<mfrac>
<msup>
   <mi>e</mi>
   <mrow>
   <mo>−</mo>
   <mn>2</mn>
   <mi>π</mi>
   </mrow>
</msup>
<mrow>
   <mn>1</mn>
   <mo>+</mo>
   <mfrac>
   <msup>
      <mi>e</mi>
      <mrow>
         <mo>−</mo>
         <mn>4</mn>
         <mi>π</mi>
      </mrow>
   </msup>
   <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mfrac>
         <msup>
         <mi>e</mi>
         <mrow>
            <mo>−</mo>
            <mn>6</mn>
            <mi>π</mi>
         </mrow>
         </msup>
         <mrow>
         <mn>1</mn>
         <mo>+</mo>
         <mfrac>
            <msup>
               <mi>e</mi>
               <mrow>
               <mo>−</mo>
               <mn>8</mn>
               <mi>π</mi>
               </mrow>
            </msup>
            <mrow>
               <mn>1</mn>
               <mo>+</mo>
               <mo>⋯</mo>
            </mrow>
         </mfrac>
         </mrow>
      </mfrac>
   </mrow>
   </mfrac>
</mrow>
</mfrac>
</math>
<h3>脑图</h3>
<div data-code="%7B%22name%22:%20%22Root%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E6%95%99%E7%A8%8B%22%7D,%20%7B%22name%22:%20%22%E8%AF%AD%E6%B3%95%E6%8C%87%E5%AF%BC%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E6%99%AE%E9%80%9A%E5%86%85%E5%AE%B9%22%7D,%20%7B%22name%22:%20%22%E6%8F%90%E5%8F%8A%E7%94%A8%E6%88%B7%22%7D,%20%7B%22name%22:%20%22%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7%20Emoji%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E4%B8%80%E4%BA%9B%E8%A1%A8%E6%83%85%E4%BE%8B%E5%AD%90%22%7D%5D%7D,%20%7B%22name%22:%20%22%E5%A4%A7%E6%A0%87%E9%A2%98%20-%20Heading%203%22,%20%22children%22:%20%5B%7B%22name%22:%20%22Heading%204%22,%20%22children%22:%20%5B%7B%22name%22:%20%22Heading%205%22,%20%22children%22:%20%5B%7B%22name%22:%20%22Heading%206%22%7D%5D%7D%5D%7D%5D%7D,%20%7B%22name%22:%20%22%E5%9B%BE%E7%89%87%22%7D,%20%7B%22name%22:%20%22%E4%BB%A3%E7%A0%81%E5%9D%97%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E6%99%AE%E9%80%9A%22%7D,%20%7B%22name%22:%20%22%E8%AF%AD%E6%B3%95%E9%AB%98%E4%BA%AE%E6%94%AF%E6%8C%81%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E6%BC%94%E7%A4%BA%20Go%20%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%22%7D,%20%7B%22name%22:%20%22%E6%BC%94%E7%A4%BA%20Java%20%E9%AB%98%E4%BA%AE%22%7D%5D%7D%5D%7D,%20%7B%22name%22:%20%22%E6%9C%89%E5%BA%8F%E3%80%81%E6%97%A0%E5%BA%8F%E3%80%81%E4%BB%BB%E5%8A%A1%E5%88%97%E8%A1%A8%22,%20%22children%22:%20%5B%7B%22name%22:%20%22%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%22%7D,%20%7B%22name%22:%20%22%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%22%7D,%20%7B%22name%22:%20%22%E4%BB%BB%E5%8A%A1%E5%88%97%E8%A1%A8%22%7D%5D%7D,%20%7B%22name%22:%20%22%E8%A1%A8%E6%A0%BC%22%7D,%20%7B%22name%22:%20%22%E9%9A%90%E8%97%8F%E7%BB%86%E8%8A%82%22%7D,%20%7B%22name%22:%20%22%E6%AE%B5%E8%90%BD%22%7D,%20%7B%22name%22:%20%22%E9%93%BE%E6%8E%A5%E5%BC%95%E7%94%A8%22%7D,%20%7B%22name%22:%20%22%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F%22%7D,%20%7B%22name%22:%20%22%E8%84%91%E5%9B%BE%22%7D,%20%7B%22name%22:%20%22%E6%B5%81%E7%A8%8B%E5%9B%BE%22%7D,%20%7B%22name%22:%20%22%E6%97%B6%E5%BA%8F%E5%9B%BE%22%7D,%20%7B%22name%22:%20%22%E7%94%98%E7%89%B9%E5%9B%BE%22%7D,%20%7B%22name%22:%20%22%E5%9B%BE%E8%A1%A8%22%7D,%20%7B%22name%22:%20%22%E4%BA%94%E7%BA%BF%E8%B0%B1%22%7D,%20%7B%22name%22:%20%22Graphviz%22%7D,%20%7B%22name%22:%20%22%E5%A4%9A%E5%AA%92%E4%BD%93%22%7D,%20%7B%22name%22:%20%22%E8%84%9A%E6%B3%A8%22%7D%5D%7D,%20%7B%22name%22:%20%22%E5%BF%AB%E6%8D%B7%E9%94%AE%22%7D%5D%7D" class="language-mindmap">- 教程
- 语法指导
- 普通内容
- 提及用户
- 表情符号 Emoji
- 一些表情例子
- 大标题 - Heading 3
- Heading 4
   - Heading 5
   - Heading 6
- 图片
- 代码块
- 普通
- 语法高亮支持
   - 演示 Go 代码高亮
   - 演示 Java 高亮
- 有序、无序、任务列表
- 无序列表
- 有序列表
- 任务列表
- 表格
- 隐藏细节
- 段落
- 链接引用
- 数学公式
- 脑图
- 流程图
- 时序图
- 甘特图
- 图表
- 五线谱
- Graphviz
- 多媒体
- 脚注
- 快捷键
</div>
<h3>流程图</h3>
<div class="language-mermaid">graph TB
C1-->A2
subgraph 三
A1-->A2
end
subgraph 二
B1-->B2
end
subgraph 一
C1-->C2
end
</div>
<h3>时序图</h3>
<div class="language-mermaid">sequenceDiagram
管理员->>小明: 哈喽，信蚁论坛网址多少?
loop 谈话中......
   小明-->>管理员: www.01ants.com!
end
</div>
<h3>甘特图</h3>
<div class="language-mermaid">gantt
title A Gantt Diagram
dateFormatYYYY-MM-DD
section Section
A task       :a1, 2019-01-01, 30d
Another task :after a1, 20d
section Another
Task in sec    :2019-01-12, 12d
another task    : 24d
</div>
<h3>图表</h3>
<div class="language-echarts">{
"title": { "text": "最近 30 天" },
"tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
"legend": { "data": ["帖子", "用户", "回帖"] },
"xAxis": [{
   "type": "category",
   "boundaryGap": false,
   "data": ["2025-03-01","2025-03-02","2025-03-03","2025-03-04","2025-03-05","2025-03-06","2025-03-07","2025-03-08","2025-03-09","2025-03-10","2025-03-11","2025-03-12","2025-03-13","2025-03-14","2025-03-15","2025-03-16","2025-03-17","2025-03-18","2025-03-19","2025-03-20","2025-03-21","2025-03-22","2025-03-23","2025-03-24","2025-03-25","2025-03-26","2025-03-27","2025-03-28","2025-03-29","2025-03-30","2025-03-31"],
   "axisTick": { "show": false },
   "axisLine": { "show": false }
}],
"yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
"series": [
{
   "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
   "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
},
{
   "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
   "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
},
{
   "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
   "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
}
]
}
</div>
<h3>五线谱</h3>
<div class="language-abc">X: 24
T: 信蚁论坛主题音乐
C: Xinyi
S: Xinyi bbs, 01ants.com
M: 6/8
L: 1/8
Q: 3/8=116
R: Creepy Jig
K: Em
|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
"C7"_B2A "B7"=B3|"Em"EEE E2G|
"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
</div>
<h3>Graphviz</h3>
<div class="language-graphviz">digraph finite_state_machine {
rankdir=LR;
size="8,5"
node ; S;
node ; qi

node ;
qi -> S;
S-> q1 [ label = "a" ];
S-> S[ label = "a" ];
q1 -> S[ label = "a" ];
q1 -> q2 [ label = "ddb" ];
q2 -> q1 [ label = "b" ];
q2 -> q2 [ label = "b" ];
}
</div>
<h3>Flowchart</h3>
<div class="language-flowchart">st=>start: 哪个是国产系统？
op=>operation: 统信UOS
cond=>condition: 麒麟Kylin?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
</div>
<h3>多媒体</h3>
<p>支持 v.qq.com，youtube.com，youku.com，coub.com，facebook.com/video，dailymotion.com，.mp4，.m4v，.ogg，.ogv，.webm，.mp3，.wav 链接解析</p>
<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=114008396996451&bvid=BV1XjAKeTEdZ&cid=28409530992&p=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<h3>脚注</h3>
<p>这里是一个脚注引用^1^，这里是另一个脚注引用^2^。</p>
<pre><code>这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。
[^1]: 第一个脚注定义。
[^bignote]: 脚注定义可使用多段内容。

缩进对齐的段落包含在这个脚注定义内。

```
可以使用代码块。
```

还有其他行级排版语法，比如**加粗**和链接。
</code></pre>
<h2>快捷键</h2>
<p>我们的编辑器支持很多快捷键，具体请参考 <a href="https://www.01ants.com/forum.php?mod=viewthread&tid=14">快捷键</a>（或者按 "<code>?</code> "?）</p>
<hr />
<ol>
<li>第一个脚注定义。 ↩</li>
<li>脚注定义可使用多段内容。<br />
缩进对齐的段落包含在这个脚注定义内。
<pre><code>可以使用代码块。

</code></pre>
还有其他行级排版语法，比如<strong>加粗</strong>和链接。 ↩</li>
</ol>

页: [1]

信蚁论坛's Archiver

关于Markdown编辑器语法参考指南