digger 发表于 6 天前

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

<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(&#34;Hello, World!&#34;)
</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--&gt;a2
subgraph one
a1--&gt;a2
end
subgraph two
b1--&gt;b2
end
subgraph three
c1--&gt;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-&gt;&gt;John: Hello John, how are you?
loop Every minute
John--&gt;&gt;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
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>
<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">{
&#34;title&#34;: { &#34;text&#34;: &#34;最近 30 天&#34; },
&#34;tooltip&#34;: { &#34;trigger&#34;: &#34;axis&#34;, &#34;axisPointer&#34;: { &#34;lineStyle&#34;: { &#34;width&#34;: 0 } } },
&#34;legend&#34;: { &#34;data&#34;: [&#34;帖子&#34;, &#34;用户&#34;, &#34;回帖&#34;] },
&#34;xAxis&#34;: [{
      &#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;],
      &#34;axisTick&#34;: { &#34;show&#34;: false },
      &#34;axisLine&#34;: { &#34;show&#34;: false }
}],
&#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; } } }],
&#34;series&#34;: [
    {
      &#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,
      &#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;]
    },
    {
      &#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;]
    }
]
}
</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
|:&#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|
&#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|
&#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>
<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=&#34;8,5&#34;
    node ; S;
    node ; qi
<pre><code>node ;
qi -&gt; S;
S-&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; ];
q2 -&gt; q1 [ label = &quot;b&quot; ];
q2 -&gt; q2 [ label = &quot;b&quot; ];
</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=&gt;start: Start:&gt;http://www.google.com
e=&gt;end:&gt;http://www.google.com
op1=&gt;operation: My Operation
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>
<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-&gt;op1-&gt;cond<br />
cond(yes)-&gt;io-&gt;e<br />
cond(no)-&gt;para<br />
para(path1, bottom)-&gt;sub1(right)-&gt;op1<br />
para(path2, top)-&gt;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 -&gt; app
app -&gt; 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 发表于 6 天前

<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&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>
<h4>没事多研究总有新的发现！</h4>
<p><em><strong>请注意不要非法搬运哦！</strong></em></p>
页: [1]
查看完整版本: 网站Markdown编辑器的使用方法和案例