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

digger · 发表于 2025-10-15 16:13:07

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册微信登陆 QQ登录 sms 手机登录

×

<h3>教程</h3>
<p><img src="data/attachment/forum/202510/15/154040fctqnuwuw7u8gkjt.webp" alt="QQ20251015-153932.webp" title="QQ20251015-153932.webp" /><br/>
这是一篇讲解如何正确使用 <em><strong>Markdown</strong></em> 的排版示例<br/>
在使用vditor编辑器时建议使用分屏预览模式进行编辑，这样可以看见你写的代码处于什么状态，更好的布局页面，将显示效果和后台的代码进行分开展示。</p>
<h4>语法指导</h4>
<h4>普通内容</h4>
<p>这段内容展示了在内容里面一些排版格式</p>
<h4>提及用户</h4>
<p>@Vanessa 通过 @User 可以在内容中提及用户，被提及的用户将会收到系统通知。</p>
<h4>表情符号 Emoji</h4>
<p>支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。</p>
<h4>一些表情例子</h4>
<p>😄 😆</p>
<p>输入公式：先输入$$（两个英文状态下的货币符号）<br/>
<em><strong>特别注意：</strong></em><br/>
公式输入不像Latex或者katex、vditor桌面版那样可以通过\\来进行换行操作，或者使用\newline进行强制换行，必须得另起一行做为公式的后续输入。</p>
<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>
<h4>输入代码内容：</h4>
<p>先输入```后面跟语言的类型，比如：Python、JavaScript、vba等自带对应语法高亮（英文状态下的，然后选择对应的语言，普通代码可以直接粘贴）</p>
<p><img src="data/attachment/forum/202510/15/154605bwsn0m5u3e0s2lea.webp" alt="输入代码.webp" title="输入代码.webp" /></p>
<pre><code class="language-python">print("Hello, World!")
</code></pre>
<h4>输入流程图：</h4>
<p><img src="data/attachment/forum/202510/15/154926jeub85k85bzbkuk9.webp" alt="输入流程图.webp" title="输入流程图.webp" /></p>
<div class="language-mermaid">graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
</div>
<h4>输入时序图：</h4>
<p><img src="data/attachment/forum/202510/15/155129c85zfzff73lubl6u.webp" alt="输入时序图.webp" title="输入时序图.webp" /></p>
<div class="language-mermaid">sequenceDiagram
Alice->>John: Hello John, how are you?
loop Every minute
John-->>Alice: Great!
end
</div>
<h4>输入甘特图：</h4>
<p><img src="data/attachment/forum/202510/15/155326nywuyz1zzzty6yzy.webp" alt="输入甘特图.webp" title="输入甘特图.webp" /></p>
<div class="language-mermaid">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
</div>
<h4>输入脑图：</h4>
<p><img src="data/attachment/forum/202510/15/155621hkupuwbu93kvs34y.webp" alt="输入脑图.webp" title="输入脑图.webp" /></p>
<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">- 教程
- 语法指导
  - 大标题 - Heading 3
- Heading 4
   - Heading 5
      - Heading 6
  - 图片
  - 代码块
- 普通
- 语法高亮支持
   - 演示 Go 代码高亮
   - 演示 Java 高亮
  - 表格
  - 隐藏细节
  - 多媒体
  - 脚注
- 快捷键
</div>
<h4>输入图表：</h4>
<p><img src="data/attachment/forum/202510/15/155901gf7miotoiqnqofht.webp" alt="输入图表.webp" title="输入图表.webp" /></p>
<div class="language-echarts">{
  "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"]
}
  ]
}
</div>
<h4>输入五线谱：</h4>
<p><img src="data/attachment/forum/202510/15/160048x72zgrv2vrlwl6kv.webp" alt="输入五线谱.webp" title="输入五线谱.webp" /></p>
<div class="language-abc">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:|
</div>
<h4>输入graphviz：</h4>
<p><img src="data/attachment/forum/202510/15/160257pbo3r8ldbdff8lrg.webp" alt="输入graphviz.webp" title="输入graphviz.webp" /></p>
<div class="language-graphviz">digraph finite_state_machine {
rankdir=LR;
size="8,5"
node [shape = doublecircle]; S;
node [shape = point ]; qi
<pre><code>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" ];
</code></pre>
<p>}</p>
</div>
<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=>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
<h4>输入flowchart</h4>
<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
<h4>输入flowchart</h4>
<p><img src="data/attachment/forum/202510/15/160631wl8lhzgibog4zmyh.webp" alt="输入flowchart.webp" title="输入flowchart.webp" /></p>
<p>st->op1->cond<br />
cond(yes)->io->e<br />
cond(no)->para<br />
para(path1, bottom)->sub1(right)->op1<br />
para(path2, top)->op1</p>
</div>
<h4>输入plantuml：</h4>
<p><img src="data/attachment/forum/202510/15/160807qqkkhs9jhiut3zzu.webp" alt="输入plantuml.webp" title="输入plantuml.webp" /></p>
<div class="language-plantuml">@startuml component
actor client
node app
database db
db -> app
app -> client
@enduml
</div>
<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>

digger · 发表于 2025-10-15 16:32:18

<h4>视频插入帖子内的操作方法</h4>
<p>先去你喜欢的视频网站找视频，然后分享功能中有一个分享代码---嵌入分享</p>
<p>这里以哔哩哔哩举例：</p>
<p><img src="data/attachment/forum/202510/15/163017waa0af0pgvy096p2.webp" alt="视频嵌入代码.webp" title="视频嵌入代码.webp" /></p>
<p>获得嵌入式代码以后回到发布帖子页面的操作：</p>
<p><img src="data/attachment/forum/202510/15/163103r6cmw4cv4ywd4jvg.webp" alt="嵌入操作.webp" title="嵌入操作.webp" /></p>
<h4>展示效果如下：</h4>
<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=115349450137199&bvid=BV1du4JzwEH4&cid=32970049184&p=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<h4>没事多研究总有新的发现！</h4>
<p><em><strong>请注意不要非法搬运哦！</strong></em></p>

[发布帖子] 网站Markdown编辑器的使用方法和案例

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

温馨提示：

电梯直达
评论1

回复

浏览过的版块

[发布帖子] 网站Markdown编辑器的使用方法和案例

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

温馨提示：

电梯直达 评论1

回复

浏览过的版块

电梯直达
评论1