本站在允许 JavaScript 运行的环境下浏览效果更佳


Vditor 样式测试

180

Vditor 是一款所见即所得编辑器,支持 Markdown

  • 不熟悉 Markdown 可使用工具栏或快捷键进行排版
  • 熟悉 Markdown 可直接排版,也可切换为分屏预览

更多细节和用法请参考 Vditor - 浏览器端的 Markdown 编辑器,同时也欢迎向我们提出建议或报告问题,谢谢 ❤️

教程

这是一篇讲解如何正确使用 Markdown 的排版示例,学会这个很有必要,能让你的文章有更佳清晰的排版。

引用文本:Markdown is a text formatting syntax inspired

语法指导

普通内容

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

提及用户

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

NOTE:

  1. @用户名之后需要有一个空格
  2. 新手没有艾特的功能权限

表情符号 Emoji

支持大部分标准的表情符号,可使用输入法直接输入,也可手动输入字符格式。通过输入 : 触发自动完成,可在个人设置中设置常用表情

一些表情例子

😄 😆 😵 😭 😰 😅 😢 😤 😍 😌
👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢

大标题 - Heading 3

你可以选择使用 H1 至 H6,使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3,不要使用 1 或 2,因为 1 是系统站点级,2 是帖子标题级。

NOTE: 别忘了 # 后面需要有空格!

Heading 4

Heading 5
Heading 6

图片

![alt 文本](http://image-path.png)
![alt 文本](http://image-path.png "图片 Title 值")

支持复制粘贴直接上传。

代码块

普通

*emphasize*    **strong**
_emphasize_    __strong__
var a = 1

语法高亮支持

如果在 ``` 后面跟随语言名称,可以有语法高亮的效果哦,比如:

演示 Go 代码高亮
package main

import "fmt"

func main() {
	fmt.Println("Hello, 世界")
}
演示 Java 高亮
public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }

}

Tip: 语言名称支持下面这些: ruby, python, js, html, erb, css, coffee, bash, json, yml, xml ...

有序、无序、任务列表

无序列表

  • Java
    • Spring
      • IoC
      • AOP
  • Go
    • gofmt
    • Wide
  • Node.js
    • Koa
    • Express

有序列表

  1. Node.js
    1. Express
    2. Koa
    3. Sails
  2. Go
    1. gofmt
    2. Wide
  3. Java
    1. Latke
    2. IDEA

任务列表

  • 发布 Sym
  • 发布 Solo
  • 预约牙医

表格

如果需要展示数据什么的,可以选择使用表格。

header 1 header 2
cell 1 cell 2
cell 3 cell 4
cell 5 cell 6

隐藏细节

这里是摘要部分。 这里是细节部分。

段落

空行可以将内容进行分段,便于阅读。(这是第一段)

使用空行在 Markdown 排版中相当重要。(这是第二段)

链接引用

链接文本

[链接文本][链接标识]

[链接标识]: https://b3log.org

数学公式

多行公式块:

\frac{1}{ \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { 1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}}{1+\cdots}} } }

行内公式:

公式 a^2 + b^2 = \color{red}c^2 是行内。

脑图

- 教程 - 语法指导 - 普通内容 - 提及用户 - 表情符号 Emoji - 一些表情例子 - 大标题 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - 图片 - 代码块 - 普通 - 语法高亮支持 - 演示 Go 代码高亮 - 演示 Java 高亮 - 有序、无序、任务列表 - 无序列表 - 有序列表 - 任务列表 - 表格 - 隐藏细节 - 段落 - 链接引用 - 数学公式 - 脑图 - 流程图 - 时序图 - 甘特图 - 图表 - 五线谱 - Graphviz - 多媒体 - 脚注 - 快捷键

流程图

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

图表

{ "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: Creepy Jig 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 op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op

多媒体

支持 v.qq.com,youtube.com,youku.com,coub.com,facebook.com/video,dailymotion.com,.mp4,.m4v,.ogg,.ogv,.webm,.mp3,.wav 链接解析

https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html

https://music.163.com/song/media/outer/url?id=407862627.mp3

https://www.bilibili.com/video/BV1WH4y177MZ

V

V

V

脚注

这里是一个脚注引用2,这里是另一个脚注引用1

这里是一个脚注引用[^1],这里是另一个脚注引用[^bignote]。
[^1]: 第一个脚注定义。
[^bignote]: 脚注定义可使用多段内容。

    缩进对齐的段落包含在这个脚注定义内。

    ```
    可以使用代码块。
    ```

    还有其他行级排版语法,比如**加粗**和[链接](https://b3log.org)。

快捷键

我们的编辑器支持很多快捷键,具体请参考 键盘快捷键(或者按 "? "😼)

关于 Mermaid

Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

Doc-Rot 是 Mermaid 致力于解决的一个难题。

绘图和编写文档花费了开发者宝贵的开发时间,而且随着业务的变更,它很快就会过期。 但是如果缺少了图表或文档,对于生产力和团队新人的业务学习都会产生巨大的阻碍。

Mermaid 通过允许用户创建便于修改的图表来解决这一难题,它也可以作为生产脚本(或其他代码)的一部分。



Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

你可以访问 教程 来查看 Live Editor 的视频教程,也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 入门指引, 用法教程.

示例

下面是一些可以使用 Mermaid 创建的图表示例。点击 语法 查看详情。

流程图 [文档 - live editor]

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

时序图 [文档 - live editor]

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
sequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

甘特图 [文档 - live editor]

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

类图 [文档 - live editor]

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
classDiagram Class01 <|-- AveryLongClass : Cool <<Interface>> Class01 Class09 --> C2 : Where am I? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { <<service>> int id size() }

状态图 [docs - live editor]

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

饼图 [文档 - live editor]

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15

Git 图 [实验特性 - live editor]

用户体验旅程图 [文档 - live editor]

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me

C4 图 [文档]

C4Context
title System Context diagram for Internet Banking System

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

Enterprise_Boundary(b1, "BankBoundary") {

  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  System_Boundary(b2, "BankBoundary2") {
    System(SystemA, "Banking System A")
    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
  }

  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

  Boundary(b3, "BankBoundary3", "boundary") {
    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
  }
}

BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
C4Context title System Context diagram for Internet Banking System Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerB, "Banking Customer B") Person_Ext(customerC, "Banking Customer C") System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Banking System A") System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") } } BiRel(customerA, SystemAA, "Uses") BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to")

  1. 脚注定义可使用多段内容。

    缩进对齐的段落包含在这个脚注定义内。

    可以使用代码块。
    

    还有其他行级排版语法,比如加粗链接

  2. 第一个脚注定义。