Vditor 样式测试

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

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

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

教程

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

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

语法指导

普通内容

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

• 加粗 - **加粗**
• 倾斜 - *倾斜*
• 删除线 - ~~删除线~~
• Code 标记 - `Code 标记`
• 超级链接 - [超级链接](https://ld246.com)
• [email protected] - [[email protected]](mailto:[email protected])

提及用户

@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
• 预约牙医

表格

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

隐藏细节

段落

空行可以将内容进行分段，便于阅读。（这是第一段）

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

链接引用

链接文本

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

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

数学公式

多行公式块：

行内公式：

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

脑图

流程图

时序图

甘特图

图表

五线谱

Graphviz

Flowchart

多媒体

支持 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

脚注

这里是一个脚注引用²，这里是另一个脚注引用¹。

这里是一个脚注引用[^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]

时序图 [文档 - 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!

甘特图 [文档 - 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

类图 [文档 - 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()
}

状态图 [docs - live editor]

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

饼图 [文档 - live editor]

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

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")