<h3>教程</h3>
I/ y; \4 d$ b6 y0 f7 R( ?<p><img src="data/attachment/forum/202510/15/154040fctqnuwuw7u8gkjt.webp" alt="QQ20251015-153932.webp" title="QQ20251015-153932.webp" /><br/>$ {" i5 Z! c- H( P9 M
这是一篇讲解如何正确使用 <em><strong>Markdown</strong></em> 的排版示例<br/>
2 A* S3 u: M% n% x在使用vditor编辑器时建议使用分屏预览模式进行编辑,这样可以看见你写的代码处于什么状态,更好的布局页面,将显示效果和后台的代码进行分开展示。</p>
+ f' O- f+ j4 A. P, X$ i3 Y% [<h4>语法指导</h4>
+ w' L4 L' h ~<h4>普通内容</h4>
3 G& N8 ^$ g4 P6 A: |8 b<p>这段内容展示了在内容里面一些排版格式</p>2 U% i' y( R/ L! S9 U
<h4>提及用户</h4>" d9 S6 c: @& r6 P: [' r R" N3 H
<p>@Vanessa 通过 @User 可以在内容中提及用户,被提及的用户将会收到系统通知。</p>5 L1 e( Y* Y" }1 K6 n& k
<h4>表情符号 Emoji</h4>
+ e6 A0 M: g) L+ O8 W8 C5 b b, U<p>支持大部分标准的表情符号,可使用输入法直接输入,也可手动输入字符格式。</p>9 E9 t' Z) H. U( Z* s$ i
<h4>一些表情例子</h4>
- [) N2 ]$ F' m<p>😄 😆</p>3 Y0 y; {$ q( I
<p>输入公式:先输入$$(两个英文状态下的货币符号)<br/>
, Q* K9 j* I* s ?<em><strong>特别注意:</strong></em><br/>
2 }5 w& S2 l3 `* m* L6 O: v公式输入不像Latex或者katex、vditor桌面版那样可以通过\\来进行换行操作,或者使用\newline进行强制换行,必须得另起一行做为公式的后续输入。</p>
2 |- w, J( @8 x5 a$ A' M, H5 G* t<p><img src="data/attachment/forum/202510/15/154527uwhqjh9vi7xxjx71.webp" alt="输入公式.webp" title="输入公式.webp" /></p>$ g2 N3 D' w0 j3 E/ B# g- t# I7 O
<div class="language-math">f(x)=x^2+x+a_1</div>
6 e5 R" u- D. E" d8 ]7 L<div class="language-math">G(x)=x^2_2+\left( (a_1+b_1)^2 \right )^6_x</div>% p+ K$ b8 h- N7 I
<h4>输入代码内容:</h4>
0 {" C7 a/ X8 x6 D<p>先输入```后面跟语言的类型,比如:Python、JavaScript、vba等自带对应语法高亮(英文状态下的,然后选择对应的语言,普通代码可以直接粘贴)</p>
8 F$ @, G! L& T, w<p><img src="data/attachment/forum/202510/15/154605bwsn0m5u3e0s2lea.webp" alt="输入代码.webp" title="输入代码.webp" /></p>$ C! l# r B* D% |% E8 W, R
<pre><code class="language-python">print("Hello, World!")
/ _" U) W: q C$ j</code></pre>
. i0 D9 Y; L5 G+ U3 w4 c+ ~<h4>输入流程图:</h4>
' y$ f8 s' b! o$ @6 i |<p><img src="data/attachment/forum/202510/15/154926jeub85k85bzbkuk9.webp" alt="输入流程图.webp" title="输入流程图.webp" /></p>
3 T! L% P' _! B2 A<div class="language-mermaid">graph TB
8 z1 h6 M7 i$ z% d/ S% u: u" Mc1-->a2
5 m7 x: w; E* t. Hsubgraph one
) x1 a* z5 F3 Aa1-->a2' Q$ L' H& }1 H a$ a
end7 a( ~! I/ s! q$ K
subgraph two
5 Q+ j4 n' P* @- z! Mb1-->b2
( b A) X3 P9 `end* w1 S# X1 t7 {( @6 h5 i
subgraph three
1 Z+ ]# H, O3 m5 e/ r2 {; [" {$ xc1-->c2
& f% v' _. f) U1 m1 m: H: b! R# i, bend
2 O5 G' N; Z- F& Q* z8 r, h. b</div>
; m% o- x2 o% Q. h<h4>输入时序图:</h4>& I# R/ P, W5 @5 P. e! A9 ?
<p><img src="data/attachment/forum/202510/15/155129c85zfzff73lubl6u.webp" alt="输入时序图.webp" title="输入时序图.webp" /></p>9 ~% u# U, o) r: w7 }' q
<div class="language-mermaid">sequenceDiagram( {* f3 s1 b) K' z; b9 K& O$ `
Alice->>John: Hello John, how are you?0 m x E! V0 o' r2 }! B4 H
loop Every minute" X. S' G% q! x" |# P& A: V: s
John-->>Alice: Great!
& `& c) b2 N0 yend
' v# A$ q$ K3 j. ]) z1 J</div>8 i- R$ x& P% P. w' L! @
<h4>输入甘特图:</h4>, ~. K' A1 V% c7 o* r6 L+ N
<p><img src="data/attachment/forum/202510/15/155326nywuyz1zzzty6yzy.webp" alt="输入甘特图.webp" title="输入甘特图.webp" /></p>7 S% z5 X. O. Z4 Z. s
<div class="language-mermaid">gantt( R9 ^4 K7 f0 z* k+ N; z" G
title A Gantt Diagram
" y% G/ C, [2 K# W( ddateFormat YYYY-MM-DD, v+ t0 H$ G- m7 w0 ?% R
section Section
W2 Y1 S6 y- F, S% {1 H5 @A task :a1, 2019-01-01, 30d
6 u5 x6 B" _9 r% {9 A: eAnother task :after a1 , 20d
6 k3 f& M' ~3 r, dsection Another1 w6 W: W: \# J; P' I. e
Task in sec :2019-01-12 , 12d
h; n. [6 u! d5 e8 u, Ranother task : 24d
8 v# l' B# D8 |# P</div>
$ h* }- Y7 v$ n<h4>输入脑图:</h4>
# D7 z3 Z' ^* V' a. k<p><img src="data/attachment/forum/202510/15/155621hkupuwbu93kvs34y.webp" alt="输入脑图.webp" title="输入脑图.webp" /></p>( c' g! x/ @9 v5 Q
<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">- 教程0 x) h2 h5 g/ h; Y# d8 O% Y) W+ \ F
- 语法指导
% I4 G1 x, y" q% }9 @ r' T% o - 大标题 - Heading 3
3 D1 [# H7 W2 U2 R! N" F - Heading 40 Z0 [' r8 X$ D: d; D8 P6 \( b o
- Heading 5. e+ ^9 v+ X P E
- Heading 6
; ^9 z0 o; l. M7 j - 图片2 e2 }2 {, V, v& ]9 I/ `
- 代码块( v) Q0 T a# C# B2 W* v
- 普通
) B+ a9 |8 H/ I Z. j5 q. { - 语法高亮支持
9 d: M: [" ?2 m* f7 T - 演示 Go 代码高亮9 Z, g* H: h3 F$ K
- 演示 Java 高亮
: z" m& D4 w1 `( X/ W8 h4 f, W - 表格
9 Y, S+ V8 J! X! i, ~9 F2 ?, u - 隐藏细节
2 D3 k3 [3 w9 G; C9 C4 O" s - 多媒体
+ M0 N2 n) r$ K - 脚注
) R* A8 r3 Q* i- c2 { q( B1 l- 快捷键+ ?/ W# T; ]5 Q4 R. I: q: l
</div>
8 B) Z; u8 e& n# q4 d) E<h4>输入图表:</h4>7 _$ U7 W' r6 n% E# N0 d2 u
<p><img src="data/attachment/forum/202510/15/155901gf7miotoiqnqofht.webp" alt="输入图表.webp" title="输入图表.webp" /></p>3 I, |: H' b. M' \1 j w% T
<div class="language-echarts">{* l+ h! H0 B* z" ?
"title": { "text": "最近 30 天" },
. K2 d0 @) t/ l/ J% d4 |* r3 m "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
( K8 D8 i8 x, O1 j4 c "legend": { "data": ["帖子", "用户", "回帖"] },
$ ?4 A1 ^8 ?+ S4 m "xAxis": [{
+ |4 l2 Q8 r) ~2 ]( Y "type": "category",
/ @& A; P# U7 o2 Y6 N+ m* r6 { "boundaryGap": false,
, t+ u: Y( m+ U0 q* p, Q8 f7 n "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"],
" X3 R5 k% d" ^+ o: \+ p0 { }- Z "axisTick": { "show": false },
8 I. {7 s* k- u/ c6 p% W1 b "axisLine": { "show": false } @! X! ~+ E. H+ P$ E% n2 ^1 X1 j. k" X
}],
# F" s7 {. t# G) e& N1 a2 l "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
7 l5 d- C1 Q) T% K "series": [
' g: F' R' J. M; E" q1 H+ f& S; g {, U9 x3 ]& l# N0 S
"name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,. j" g9 B/ t3 ?
"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"]' _! }! s3 Y9 M, y
},6 e. x( L+ j4 c/ v- V
{
, L7 t& N; \, x( V h4 ~$ |' r* S "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
; H, h6 W1 z1 a7 u6 q: P "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"]$ S% w( D& _: o" ~
},
) `" k6 R. K% O, u {5 X! G1 u. M, v2 C& S- p
"name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,9 F9 J$ g! [; i4 _
"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"]
& h# ] b1 H) v8 ? }* z; H3 K1 m# a8 g: }& z( v2 y# @
]
* j' J! G$ V0 _+ c. g( @}
, K6 ^- s0 C4 |2 g3 M" q: [</div>0 V6 |& N9 Z( |* c$ b7 y
<h4>输入五线谱:</h4>2 p7 V5 f K. T
<p><img src="data/attachment/forum/202510/15/160048x72zgrv2vrlwl6kv.webp" alt="输入五线谱.webp" title="输入五线谱.webp" /></p>
" |3 i- q( S/ Y/ e1 ]) x<div class="language-abc">X: 241 t' Z! ~- g0 Q2 R
T: Clouds Thicken8 o h3 Z( Y3 a% T6 x: v. ~' i) r
C: Paul Rosen- z* _+ ^. |9 Z2 E
S: Copyright 2005, Paul Rosen
0 t4 D. `$ M& |9 Q' UM: 6/8' b8 u2 b; v1 h$ m' W& R
L: 1/86 q' O9 S+ ^) T0 m% _# }
Q: 3/8=116
! T0 [6 m; F& wR: CreepyJig
- a, w r5 V2 p3 ^2 \7 ~" p, MK: Em
, _2 [5 S3 B7 X0 R$ K9 P3 X|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\\6 Q6 R" |# w) D H, h% @0 v/ s; C/ n
"C7"_B2A "B7"=B3|"Em"EEE E2G|+ Q- ~; _ I' v% D5 U7 V
"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\\
0 i; D* |$ N, q$ ^/ u5 _% |$ U/ t1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|% u4 m5 o8 }( N" n F- S5 C
"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\\; ~4 Y7 j* j5 \$ a/ G6 _( @5 m
"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
& L7 e: d# V. {. Q+ r! h/ t</div>
' c% f, @$ a3 h9 P<h4>输入graphviz:</h4>, h, X/ v; ?' j' m7 K
<p><img src="data/attachment/forum/202510/15/160257pbo3r8ldbdff8lrg.webp" alt="输入graphviz.webp" title="输入graphviz.webp" /></p>+ [" T1 ~- k/ ]
<div class="language-graphviz">digraph finite_state_machine {3 [5 O! E' ~/ d: V. _5 `, ^5 k% u! _( v
rankdir=LR;- r- J/ t+ @' K) Q- X& W
size="8,5"
4 n$ y/ E4 {" O. h node [shape = doublecircle]; S;. O; S9 F' L/ r& S
node [shape = point ]; qi
1 Q m" j2 a9 s: A) p<pre><code>node [shape = circle];
3 y( j$ Y, O( ?8 u! Q7 tqi -> S;
/ b$ N/ p. c6 ?+ Z' F+ I( `7 oS -> q1 [ label = "a" ];
) ]9 F( _5 B* S2 {1 e$ |S -> S [ label = "a" ];
; r1 x z5 h9 Y9 I0 Hq1 -> S [ label = "a" ];
+ q, k& ]& V* ]q1 -> q2 [ label = "ddb" ];
3 d1 X- ~# g# b' lq2 -> q1 [ label = "b" ];
' W( I) v" R0 `, c' K" ]) t% Y2 s7 P) [q2 -> q2 [ label = "b" ];
; V6 M2 @4 o* Q' t; I; v# b</code></pre>
* m9 l) T5 a4 i# V<p>}</p>6 R ?: s4 k+ X+ Z* K
</div>' D- _, P7 S+ c" {6 f
<h4>输入flowchart</h4>
: u- ~- o( N) U% J' t% j& X+ y<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
/ M+ |( U6 t" O<div class="language-flowchart">st=>start: Start:>http://www.google.com[blank]% ^9 `* c" l" a8 n S2 ^
e=>end:>http://www.google.com
; m; }+ \! L( ]9 [5 V; D- cop1=>operation: My Operation
/ w' C d( F6 B; q4 }/ G% ysub1=>subroutine: My Subroutine
3 d) k; _$ h, d! d, z+ Zcond=>condition: Yes3 r- s% }+ T5 O+ r. H
or No?:>http://www.google.com8 a5 }- y+ H+ g- @! X/ B
io=>inputoutput: catch something...: l0 I2 K% P2 N( X5 y8 n
para=>parallel: parallel tasks W0 N7 J" Y' H4 G
<h4>输入flowchart</h4>; e5 X! e- F/ [) R2 p7 c0 `# U" k6 O2 ~
<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>% L3 \/ h1 t5 `- m" `- ^
<h4>输入flowchart</h4>" i; Q9 x, I* G' l* @
<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
# Z1 t+ _/ V4 A. i* y<p>st->op1->cond<br />! N2 F8 y2 i7 y* @ {0 a
cond(yes)->io->e<br />
6 ^9 k) Y8 W* A# H( c/ n: d0 mcond(no)->para<br />: j% O# C; ~& K4 s" q3 w, ^; @* B/ I
para(path1, bottom)->sub1(right)->op1<br />
p- l/ [# E: o5 d1 V. n, h Qpara(path2, top)->op1</p>! |/ E1 F; v, s4 F$ W5 @
</div>
7 s( R+ V7 u3 A5 L- y$ s<h4>输入plantuml:</h4>
5 B- `: E5 b9 |+ x+ F<p><img src="data/attachment/forum/202510/15/160807qqkkhs9jhiut3zzu.webp" alt="输入plantuml.webp" title="输入plantuml.webp" /></p>
6 P r3 F* g4 U' o: @- X<div class="language-plantuml">@startuml component
9 }! H4 a! Y1 e4 J6 v* pactor client
0 Y! z/ K- c8 h9 p1 J, h, h! Vnode app. h- q# L9 D+ r, k3 P! W% p" C& T
database db
0 G& B- d" p& f8 b$ R- ^db -> app
- x# X$ x, r) P% @app -> client
& Z9 w1 K9 G" C4 @( n3 E: Z@enduml2 J/ n/ j& f q) K, K: ^& F
</div>* W# {; L P- x1 x
<h3>结语:</h3>
( o2 l9 R, x7 @# D8 m' @<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>$ q# k) ?: K! E! S2 g2 ]. V$ q
<h4>输入plantuml:</h4>
\ `( V1 x; k& H<p><img src="data/attachment/forum/202510/15/160807qqkkhs9jhiut3zzu.webp" alt="输入plantuml.webp" title="输入plantuml.webp" /></p>
6 b h7 ]8 p6 s8 r) V6 n$ O, t<h3>结语:</h3>
* h; H6 R4 e# r1 r2 |<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>6 A1 s8 H& Z) k; ]0 `) t
|
温馨提示:
本文《网站Markdown编辑器的使用方法和案例》由: digger 发表于 2025-10-15 16:13
原文链接:https://www.jiangmen.pro/thread-28-1-1.html
- 1、本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2、本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3、本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4、未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5、匠们网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6、下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7、本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
- 8、该内容可能包含由AI辅助创作,请仔细甄别。
|