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

<h3>教程</h3>
5 x$ }- e" W) i) ?$ G) k<p><img src="data/attachment/forum/202510/15/154040fctqnuwuw7u8gkjt.webp" alt="QQ20251015-153932.webp" title="QQ20251015-153932.webp" /><br/>
; V' o3 _; N1 g0 m8 T- U; r这是一篇讲解如何正确使用 <em><strong>Markdown</strong></em> 的排版示例<br/>
+ k8 K- j+ ?% N' M% B在使用vditor编辑器时建议使用分屏预览模式进行编辑，这样可以看见你写的代码处于什么状态，更好的布局页面，将显示效果和后台的代码进行分开展示。</p>
<h4>语法指导</h4>
7 N( g3 v0 b' H# ^6 u0 w<h4>普通内容</h4>
4 Z0 o; G, t- h/ h+ e. w4 [; x6 N8 F<p>这段内容展示了在内容里面一些排版格式</p>
<h4>提及用户</h4>
, ^' h6 g! g+ T+ F$ ?<p>@Vanessa 通过 @User 可以在内容中提及用户，被提及的用户将会收到系统通知。</p>
; Z! A6 V8 K# T5 B! ^6 x& \" f<h4>表情符号 Emoji</h4>
7 I( M9 {7 ~& Y% d# @$ m7 l% E<p>支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。</p>
) L  p* {9 ]8 ]0 M' J<h4>一些表情例子</h4>
<p>😄 😆</p>
5 [# {; ]6 h! p1 c& x! z2 S<p>输入公式：先输入$$（两个英文状态下的货币符号）<br/>
<em><strong>特别注意：</strong></em><br/>
7 O. n% L3 P: l  n8 A公式输入不像Latex或者katex、vditor桌面版那样可以通过\\来进行换行操作，或者使用\newline进行强制换行，必须得另起一行做为公式的后续输入。</p>
2 ]! g8 k5 J; v2 y& S1 \: c+ u<p><img src="data/attachment/forum/202510/15/154527uwhqjh9vi7xxjx71.webp" alt="输入公式.webp" title="输入公式.webp" /></p>
<div class="language-math">f(x)=x^2+x+a_1</div>
<div class="language-math">G（x）=x^2_2+\left( (a_1+b_1)^2  \right )^6_x</div>
  A6 Z- c% p; N9 u9 L<h4>输入代码内容：</h4>
, Q; t* z0 Y2 s3 `8 ?: r/ T7 t6 T: M<p>先输入```后面跟语言的类型，比如：Python、JavaScript、vba等自带对应语法高亮（英文状态下的，然后选择对应的语言，普通代码可以直接粘贴）</p>
' H$ L% c, s. I<p><img src="data/attachment/forum/202510/15/154605bwsn0m5u3e0s2lea.webp" alt="输入代码.webp" title="输入代码.webp" /></p>
<pre><code class="language-python">print(&#34;Hello, World!&#34;)
" ]6 s8 d& E$ f! F, l</code></pre>
<h4>输入流程图：</h4>
- H8 q/ ?4 C* `; b$ s) P<p><img src="data/attachment/forum/202510/15/154926jeub85k85bzbkuk9.webp" alt="输入流程图.webp" title="输入流程图.webp" /></p>
9 C) K: t7 p8 x<div class="language-mermaid">graph TB
c1--&gt;a2
subgraph one
% O! z, i" U1 ?  a9 ca1--&gt;a2
end
subgraph two
b1--&gt;b2
end
- M4 y) l5 t, d0 K# x" fsubgraph three
c1--&gt;c2
end
</div>
( ]! g3 h: A) Z( m<h4>输入时序图：</h4>
<p><img src="data/attachment/forum/202510/15/155129c85zfzff73lubl6u.webp" alt="输入时序图.webp" title="输入时序图.webp" /></p>
8 u( K8 }" E, ^1 Q) S( K( Y' |<div class="language-mermaid">sequenceDiagram
9 I4 y0 n9 U  s6 J  qAlice-&gt;&gt;John: Hello John, how are you?
  m  M2 y, l2 I' u0 D. ^$ ^loop Every minute
John--&gt;&gt;Alice: Great!
end
) f; v/ h" p- m: K6 _/ N) p$ j  M</div>
<h4>输入甘特图：</h4>
6 V, n; F; }/ ]" q; z. [<p><img src="data/attachment/forum/202510/15/155326nywuyz1zzzty6yzy.webp" alt="输入甘特图.webp" title="输入甘特图.webp" /></p>
<div class="language-mermaid">gantt
. H% C' f9 Q! A% J9 g6 utitle A Gantt Diagram
  z7 v  k+ I: \) V" }( E8 OdateFormat  YYYY-MM-DD
section Section
A task           :a1, 2019-01-01, 30d
Another task     :after a1  , 20d
* E) |& }; O# K6 `  |3 G" Csection Another
Task in sec      :2019-01-12  , 12d
8 q9 N7 B0 I: k+ l4 Q3 aanother task      : 24d
+ n; O1 [4 j; V</div>
1 z# n0 `1 {) `2 H. n5 @* P<h4>输入脑图：</h4>
. n- x4 F  X" i. ~<p><img src="data/attachment/forum/202510/15/155621hkupuwbu93kvs34y.webp" alt="输入脑图.webp" title="输入脑图.webp" /></p>
+ X+ G- A* q; N! s% g<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%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%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%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">- 教程
8 [: V9 t8 o' z1 V- 语法指导
  - 大标题 - Heading 3
    - Heading 4
- ?+ o# @$ r, N( B/ S3 l0 R      - Heading 5
* j0 _% m% f, ]0 ?* `/ \5 V$ t5 y4 t: l        - Heading 6
; [3 ]9 g. @9 Z) T" L  - 图片
7 D6 ]  i- Q7 B( g) d  S9 h  - 代码块
    - 普通
! w3 N& R* e0 }- ~, p& l( x    - 语法高亮支持
( m3 R4 b) O- k$ o  ^      - 演示 Go 代码高亮
8 f: W0 o. G, d6 c6 E      - 演示 Java 高亮
  - 表格
# n0 g) F( K7 W  - 隐藏细节
# ~) H- L. w# L( r  - 多媒体
  - 脚注
7 G  z1 I3 p* D: ~2 c: }- 快捷键
$ M1 r4 ]/ \& ?" D) c</div>
<h4>输入图表：</h4>
<p><img src="data/attachment/forum/202510/15/155901gf7miotoiqnqofht.webp" alt="输入图表.webp" title="输入图表.webp" /></p>
<div class="language-echarts">{
  &#34;title&#34;: { &#34;text&#34;: &#34;最近 30 天&#34; },
. q4 _  T, |& m9 Z; Q  &#34;tooltip&#34;: { &#34;trigger&#34;: &#34;axis&#34;, &#34;axisPointer&#34;: { &#34;lineStyle&#34;: { &#34;width&#34;: 0 } } },
$ g+ x' y) x( t/ S( q( Z  &#34;legend&#34;: { &#34;data&#34;: [&#34;帖子&#34;, &#34;用户&#34;, &#34;回帖&#34;] },
  &#34;xAxis&#34;: [{
5 Z* ?9 Y5 I! h      &#34;type&#34;: &#34;category&#34;,
      &#34;boundaryGap&#34;: false,
      &#34;data&#34;: [&#34;2019-05-08&#34;,&#34;2019-05-09&#34;,&#34;2019-05-10&#34;,&#34;2019-05-11&#34;,&#34;2019-05-12&#34;,&#34;2019-05-13&#34;,&#34;2019-05-14&#34;,&#34;2019-05-15&#34;,&#34;2019-05-16&#34;,&#34;2019-05-17&#34;,&#34;2019-05-18&#34;,&#34;2019-05-19&#34;,&#34;2019-05-20&#34;,&#34;2019-05-21&#34;,&#34;2019-05-22&#34;,&#34;2019-05-23&#34;,&#34;2019-05-24&#34;,&#34;2019-05-25&#34;,&#34;2019-05-26&#34;,&#34;2019-05-27&#34;,&#34;2019-05-28&#34;,&#34;2019-05-29&#34;,&#34;2019-05-30&#34;,&#34;2019-05-31&#34;,&#34;2019-06-01&#34;,&#34;2019-06-02&#34;,&#34;2019-06-03&#34;,&#34;2019-06-04&#34;,&#34;2019-06-05&#34;,&#34;2019-06-06&#34;,&#34;2019-06-07&#34;],
; }/ @( H& Y5 o' d! n) t+ [( Y      &#34;axisTick&#34;: { &#34;show&#34;: false },
. s, C) m3 r3 ?6 @$ y, g. e      &#34;axisLine&#34;: { &#34;show&#34;: false }
  }],
8 \0 O* L! e8 ?' }# i4 t4 ^+ w4 Z  &#34;yAxis&#34;: [{ &#34;type&#34;: &#34;value&#34;, &#34;axisTick&#34;: { &#34;show&#34;: false }, &#34;axisLine&#34;: { &#34;show&#34;: false }, &#34;splitLine&#34;: { &#34;lineStyle&#34;: { &#34;color&#34;: &#34;rgba(0, 0, 0, .38)&#34;, &#34;type&#34;: &#34;dashed&#34; } } }],
2 H- s9 [$ ~- \% q  &#34;series&#34;: [
7 S7 j: Y$ h  O/ p. C    {
      &#34;name&#34;: &#34;帖子&#34;, &#34;type&#34;: &#34;line&#34;, &#34;smooth&#34;: true, &#34;itemStyle&#34;: { &#34;color&#34;: &#34;#d23f31&#34; }, &#34;areaStyle&#34;: { &#34;normal&#34;: {} }, &#34;z&#34;: 3,
; B$ E0 N) W+ M! {0 I; D      &#34;data&#34;: [&#34;18&#34;,&#34;14&#34;,&#34;22&#34;,&#34;9&#34;,&#34;7&#34;,&#34;18&#34;,&#34;10&#34;,&#34;12&#34;,&#34;13&#34;,&#34;16&#34;,&#34;6&#34;,&#34;9&#34;,&#34;15&#34;,&#34;15&#34;,&#34;12&#34;,&#34;15&#34;,&#34;8&#34;,&#34;14&#34;,&#34;9&#34;,&#34;10&#34;,&#34;29&#34;,&#34;22&#34;,&#34;14&#34;,&#34;22&#34;,&#34;9&#34;,&#34;10&#34;,&#34;15&#34;,&#34;9&#34;,&#34;9&#34;,&#34;15&#34;,&#34;0&#34;]
0 R4 R9 Y5 W/ Y  L  k    },
    {
. f4 M& ~. v5 Q( c/ {      &#34;name&#34;: &#34;用户&#34;, &#34;type&#34;: &#34;line&#34;, &#34;smooth&#34;: true, &#34;itemStyle&#34;: { &#34;color&#34;: &#34;#f1e05a&#34; }, &#34;areaStyle&#34;: { &#34;normal&#34;: {} }, &#34;z&#34;: 2,
      &#34;data&#34;: [&#34;31&#34;,&#34;33&#34;,&#34;30&#34;,&#34;23&#34;,&#34;16&#34;,&#34;29&#34;,&#34;23&#34;,&#34;37&#34;,&#34;41&#34;,&#34;29&#34;,&#34;16&#34;,&#34;13&#34;,&#34;39&#34;,&#34;23&#34;,&#34;38&#34;,&#34;136&#34;,&#34;89&#34;,&#34;35&#34;,&#34;22&#34;,&#34;50&#34;,&#34;57&#34;,&#34;47&#34;,&#34;36&#34;,&#34;59&#34;,&#34;14&#34;,&#34;23&#34;,&#34;46&#34;,&#34;44&#34;,&#34;51&#34;,&#34;43&#34;,&#34;0&#34;]
    },
    {
      &#34;name&#34;: &#34;回帖&#34;, &#34;type&#34;: &#34;line&#34;, &#34;smooth&#34;: true, &#34;itemStyle&#34;: { &#34;color&#34;: &#34;#4285f4&#34; }, &#34;areaStyle&#34;: { &#34;normal&#34;: {} }, &#34;z&#34;: 1,
      &#34;data&#34;: [&#34;35&#34;,&#34;42&#34;,&#34;73&#34;,&#34;15&#34;,&#34;43&#34;,&#34;58&#34;,&#34;55&#34;,&#34;35&#34;,&#34;46&#34;,&#34;87&#34;,&#34;36&#34;,&#34;15&#34;,&#34;44&#34;,&#34;76&#34;,&#34;130&#34;,&#34;73&#34;,&#34;50&#34;,&#34;20&#34;,&#34;21&#34;,&#34;54&#34;,&#34;48&#34;,&#34;73&#34;,&#34;60&#34;,&#34;89&#34;,&#34;26&#34;,&#34;27&#34;,&#34;70&#34;,&#34;63&#34;,&#34;55&#34;,&#34;37&#34;,&#34;0&#34;]
; O9 X9 z/ q$ G6 h9 {% S    }
9 G/ P. Z2 K; b  ]
9 K- z7 D9 y/ L" }. n}
+ B# V+ R; l3 b" _! Z+ l- q: H</div>
& L: L, G2 n! y5 T; S4 c) C<h4>输入五线谱：</h4>
! M+ f+ O2 j9 l' k& M  B<p><img src="data/attachment/forum/202510/15/160048x72zgrv2vrlwl6kv.webp" alt="输入五线谱.webp" title="输入五线谱.webp" /></p>
<div class="language-abc">X: 24
% k( f7 J( L) B  w7 t8 oT: Clouds Thicken
C: Paul Rosen
S: Copyright 2005, Paul Rosen
M: 6/8
7 y" S! M5 X$ g. {L: 1/8
Q: 3/8=116
R: CreepyJig
K: Em
|:&#34;Em&#34;EEE E2G|&#34;C7&#34;_B2A G2F|&#34;Em&#34;EEE E2G|\\
&#34;C7&#34;_B2A &#34;B7&#34;=B3|&#34;Em&#34;EEE E2G|
, L) Q$ C) j3 i# K+ P( C# G+ t# P7 V&#34;C7&#34;_B2A G2F|&#34;Em&#34;GFE &#34;D (Bm7)&#34;F2D|\\
1&#34;Em&#34;E3-E3:|2&#34;Em&#34;E3-E2B|:&#34;Em&#34;e2e gfe|
  \6 T7 r& g% W- W) U! U&#34;G&#34;g2ab3|&#34;Em&#34;gfeg2e|&#34;D&#34;fedB2A|&#34;Em&#34;e2e gfe|\\
&#34;G&#34;g2ab3|&#34;Em&#34;gfe&#34;D&#34;f2d|&#34;Em&#34;e3-e3:|
</div>
5 j* v5 H* v5 S/ H* m<h4>输入graphviz：</h4>
$ K! j4 n: h, j4 I<p><img src="data/attachment/forum/202510/15/160257pbo3r8ldbdff8lrg.webp" alt="输入graphviz.webp" title="输入graphviz.webp" /></p>
* f& P9 |8 l: T% C: B! t; A<div class="language-graphviz">digraph finite_state_machine {
8 X& U- a8 Y2 ]: b! N    rankdir=LR;
$ O3 `) y8 j( D) B    size=&#34;8,5&#34;
$ Z- h* ~7 B. D+ Y( F" o    node [shape = doublecircle]; S;
4 Y7 c$ f- T) V8 K4 \' [3 ^    node [shape = point ]; qi
  {6 s6 @- j" o3 r) ]+ a<pre><code>node [shape = circle];
5 b8 I, U8 i8 V$ t- s! W' Tqi -&gt; S;
$ O. ^  P9 |! ]6 r( V; w) J4 LS  -&gt; q1 [ label = &quot;a&quot; ];
S  -&gt; S  [ label = &quot;a&quot; ];
q1 -&gt; S  [ label = &quot;a&quot; ];
q1 -&gt; q2 [ label = &quot;ddb&quot; ];
1 N5 l7 _5 M, ?1 mq2 -&gt; q1 [ label = &quot;b&quot; ];
" R8 p: ^6 I. O0 Q5 Sq2 -&gt; q2 [ label = &quot;b&quot; ];
</code></pre>
<p>}</p>
/ V& R6 o$ f: y; b: C* _: e$ S</div>
7 i3 Q0 Q. b7 |9 p( R/ `; @<h4>输入flowchart</h4>
<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
<div class="language-flowchart">st=&gt;start: Start:&gt;http://www.google.com[blank]
2 v; i6 W% I. U% o4 L( e3 L8 ~e=&gt;end:&gt;http://www.google.com
$ I2 e& q. o* f5 \$ P/ L* zop1=&gt;operation: My Operation
, g7 @1 z5 X# X! `3 P6 `sub1=&gt;subroutine: My Subroutine
cond=&gt;condition: Yes
or No?:&gt;http://www.google.com
io=&gt;inputoutput: catch something...
para=&gt;parallel: parallel tasks
<h4>输入flowchart</h4>
3 o3 ?1 V: m1 q# e* g& o" u. I/ \7 O<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
<h4>输入flowchart</h4>
7 q# ?9 W( y/ @# r9 e* w+ Z$ s6 Q0 {<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
& s  y8 s% R2 C. ^7 V* B<p>st-&gt;op1-&gt;cond<br />
( \7 g) `, R8 T  ?/ c+ G. c* Mcond(yes)-&gt;io-&gt;e<br />
cond(no)-&gt;para<br />
/ C8 \" x! q6 H& G+ s! ~7 P6 fpara(path1, bottom)-&gt;sub1(right)-&gt;op1<br />
para(path2, top)-&gt;op1</p>
</div>
" i! `" g* B# n. H; m5 |3 }<h4>输入plantuml：</h4>
9 q0 M; V: c$ ^- C! t<p><img src="data/attachment/forum/202510/15/160807qqkkhs9jhiut3zzu.webp" alt="输入plantuml.webp" title="输入plantuml.webp" /></p>
<div class="language-plantuml">@startuml component
1 t1 E5 k, ~7 c; ^, O" q7 T( n1 Bactor client
9 m" [" c. c* ^4 jnode app
) z: N' V) b& ~" fdatabase db
db -&gt; app
app -&gt; client
@enduml
</div>
* L. i# Y* d) W% k<h3>结语：</h3>
<p>Vditor Markdown编辑器功能强大，需要一些学习才能完全掌握，但是它是最能体现专业性的编辑器，无论是公式还是图表，所以如果你在学习的路上请掌握Markdown编辑器以及Latex或者katex的公式代码写法，当然也有公式转化工具，但他们的用法前提也是你必须得掌握Latex语法 <img alt="1f62c" class="emoji" src="https://www.jiangmen.pro/static/image/smiley/default/1f62c.gif" title="1f62c" /></p>
<h4>输入plantuml：</h4>
<p><img src="data/attachment/forum/202510/15/160807qqkkhs9jhiut3zzu.webp" alt="输入plantuml.webp" title="输入plantuml.webp" /></p>
<h3>结语：</h3>
<p>Vditor Markdown编辑器功能强大，需要一些学习才能完全掌握，但是它是最能体现专业性的编辑器，无论是公式还是图表，所以如果你在学习的路上请掌握Markdown编辑器以及Latex或者katex的公式代码写法，当然也有公式转化工具，但他们的用法前提也是你必须得掌握Latex语法 <img alt="1f62c" class="emoji" src="https://www.jiangmen.pro/static/image/smiley/default/1f62c.gif" title="1f62c" /></p>

<h4>视频插入帖子内的操作方法</h4>
& p% V% `5 q; Q  ^6 D<p>先去你喜欢的视频网站找视频，然后分享功能中有一个分享代码---嵌入分享</p>
<p>这里以哔哩哔哩举例：</p>
<p><img src="data/attachment/forum/202510/15/163017waa0af0pgvy096p2.webp" alt="视频嵌入代码.webp" title="视频嵌入代码.webp" /></p>
  ?. a8 Y; B3 C8 ]3 {" i<p>获得嵌入式代码以后回到发布帖子页面的操作：</p>
<p><img src="data/attachment/forum/202510/15/163103r6cmw4cv4ywd4jvg.webp" alt="嵌入操作.webp" title="嵌入操作.webp" /></p>
<h4>展示效果如下：</h4>
6 a" c6 [. \4 L) E; N2 \9 k<iframe src="https://player.bilibili.com/player.html?isOutside=true&amp;aid=115349450137199&amp;bvid=BV1du4JzwEH4&amp;cid=32970049184&amp;p=1&amp;danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
) I4 e) r' ^2 m3 Y, }<h4>没事多研究总有新的发现！</h4>
- T1 t. e  s, c4 V<p><em><strong>请注意不要非法搬运哦！</strong></em></p>