网站Markdown编辑器的使用方法和案例

教程

这是一篇讲解如何正确使用 Markdown 的排版示例
在使用vditor编辑器时建议使用分屏预览模式进行编辑，这样可以看见你写的代码处于什么状态，更好的布局页面，将显示效果和后台的代码进行分开展示。

语法指导

普通内容

这段内容展示了在内容里面一些排版格式

提及用户

@Vanessa 通过 @User 可以在内容中提及用户，被提及的用户将会收到系统通知。

表情符号 Emoji

支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。

一些表情例子

😄 😆

输入公式：先输入$$（两个英文状态下的货币符号）
特别注意：
公式输入不像Latex或者katex、vditor桌面版那样可以通过\\来进行换行操作，或者使用\newline进行强制换行，必须得另起一行做为公式的后续输入。

f(x)=x^2+x+a_1

G（x）=x^2_2+\left( (a_1+b_1)^2 \right )^6_x

输入代码内容：

先输入```后面跟语言的类型，比如：Python、JavaScript、vba等自带对应语法高亮（英文状态下的，然后选择对应的语言，普通代码可以直接粘贴）

print("Hello, World!")

输入流程图：

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end

输入时序图：

sequenceDiagram Alice->>John: Hello John, how are you? loop Every minute John-->>Alice: Great! end

输入甘特图：

gantt title A Gantt Diagram dateFormat YYYY-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

输入脑图：

- 教程 - 语法指导 - 大标题 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - 图片 - 代码块 - 普通 - 语法高亮支持 - 演示 Go 代码高亮 - 演示 Java 高亮 - 表格 - 隐藏细节 - 多媒体 - 脚注 - 快捷键

输入图表：

{ "title": { "text": "最近 30 天" }, "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } }, "legend": { "data": ["帖子", "用户", "回帖"] }, "xAxis": [{ "type": "category", "boundaryGap": false, "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"], "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"] } ] }

输入五线谱：

X: 24 T: Clouds Thicken C: Paul Rosen S: Copyright 2005, Paul Rosen M: 6/8 L: 1/8 Q: 3/8=116 R: CreepyJig 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:|

输入graphviz：

digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; S; node [shape = point ]; qi

node [shape = circle];
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" ];

}

输入flowchart

st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks

输入flowchart

输入flowchart

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

输入plantuml：

@startuml component actor client node app database db db -> app app -> client @enduml

结语：

Vditor Markdown编辑器功能强大，需要一些学习才能完全掌握，但是它是最能体现专业性的编辑器，无论是公式还是图表，所以如果你在学习的路上请掌握Markdown编辑器以及Latex或者katex的公式代码写法，当然也有公式转化工具，但他们的用法前提也是你必须得掌握Latex语法

输入plantuml：

结语：

Vditor Markdown编辑器功能强大，需要一些学习才能完全掌握，但是它是最能体现专业性的编辑器，无论是公式还是图表，所以如果你在学习的路上请掌握Markdown编辑器以及Latex或者katex的公式代码写法，当然也有公式转化工具，但他们的用法前提也是你必须得掌握Latex语法

视频插入帖子内的操作方法

先去你喜欢的视频网站找视频，然后分享功能中有一个分享代码---嵌入分享

这里以哔哩哔哩举例：

获得嵌入式代码以后回到发布帖子页面的操作：

展示效果如下：

没事多研究总有新的发现！

请注意不要非法搬运哦！