排版元素#

行级元素#

请从这里开始
超级链接
图片

可通过复制粘贴或拖拽来上传图片；上传后的图片可通过拖拽进行大小调整。
加粗
倾斜
下划线
~~删除线~~
标记
^上标^
下标
快捷键
#标签#
行级代码
$a^2 + b^2 = \color{red}c^2$
备注^（这是一个行级备注）^
颜色 1 颜色 2 颜色 3 颜色 4 颜色 5 颜色 6 颜色 7 颜色 8 颜色 9 颜色 10 颜色 11 颜色 12 颜色 13

特效 1 特效 2
通过输入 : 加字母触发表情字符搜索 😄 😆 😵 😭 😰 😅 😢 😤 😍 😌👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢

超级块#

段落一

段落二居中

段落三

段落四居右

嵌入块#

在思源中，唯一重要的核心概念是内容块。通过排版格式即可形成内容块，这样我们就能在块级粒度上对思绪和知识进行整理，同时也能方便长文阅读和输出。

标题块#

有序、无序、任务列表#

无序列表#

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

有序列表#

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

任务列表#

发布思源
预约牙医

引述块#

注意不是内容块引用，而是引述块（Blockquote）。

代码块#

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

演示 Go 代码高亮#

1
package main
2

3
import "fmt"
4

5
func main() {
6
  fmt.Println("Hello, 世界")
7
}

演示 Java 高亮#

1
public class HelloWorld {
2

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

7
}

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

表格#

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

HTML 块#

你nǐ 　好　hǎo 　世　shì 　界　jiè
Hello World

#注意#：

使用 HTML 块时不会对其中的代码进行安全过滤，请确认代码安全后再使用，以免遭遇跨站脚本攻击（XSS）
因为 Markdown 规范对 HTML 块解析规则较为复杂，建议使用 <div></div> 包裹 HTML 代码并去掉空行

分隔线#

数学公式#

\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}} } }

IFrame#

视频#

音频#

脑图#

1
- 教程
2
- 语法指导
3
  - 普通内容
4
  - 提及用户
5
  - 表情符号 Emoji
6
    - 一些表情例子
7
  - 大标题 - Heading 3
8
    - Heading 4
9
      - Heading 5
10
        - Heading 6
11
  - 图片
12
  - 代码块
13
    - 普通
14
    - 语法高亮支持
15
      - 演示 Go 代码高亮
16
      - 演示 Java 高亮
17
  - 有序、无序、任务列表
18
    - 无序列表
19
    - 有序列表
20
    - 任务列表
21
  - 表格
22
  - 隐藏细节
23
  - 段落
24
  - 链接引用
25
  - 数学公式
26
  - 脑图
27
  - 流程图
28
  - 时序图
29
  - 甘特图
30
  - 图表
31
  - 五线谱
32
  - Graphviz
33
  - 多媒体
34
  - 脚注
35
- 快捷键

使用 Markdown 列表语法渲染脑图。

流程图#

1
graph TB
2
    c1-->a2
3
    subgraph one
4
    a1-->a2
5
    end
6
    subgraph two
7
    b1-->b2
8
    end
9
    subgraph three
10
    c1-->c2
11
    end

语法请参考 Mermaid。

时序图#

1
sequenceDiagram
2
    Alice->>John: Hello John, how are you?
3
    loop Every minute
4
        John-->>Alice: Great!
5
    end

语法请参考 Mermaid。

甘特图#

1
gantt
2
    title A Gantt Diagram
3
    dateFormat  YYYY-MM-DD
4
    section Section
5
    A task           :a1, 2019-01-01, 30d
6
    Another task     :after a1  , 20d
7
    section Another
8
    Task in sec      :2019-01-12  , 12d
9
    another task      : 24d

语法请参考 Mermaid。

类图#

1
classDiagram
2
Class01 <|-- AveryLongClass : Cool
3
Class03 *-- Class04
4
Class05 o-- Class06
5
Class07 .. Class08
6
Class09 --> C2 : Where am i?
7
Class09 --* C3
8
Class09 --|> Class07
9
Class07 : equals()
10
Class07 : Object[] elementData
11
Class01 : size()
12
Class01 : int chimp
13
Class01 : int gorilla
14
Class08 <--> C2: Cool label

语法请参考 Mermaid。

用户游历图#

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

语法请参考 Mermaid。

Git 图#

1
    gitGraph
2
       commit
3
       commit
4
       branch develop
5
       commit
6
       commit
7
       commit
8
       checkout main
9
       commit
10
       commit

语法请参考 Mermaid。

实体关系图#

1
erDiagram
2
    CUSTOMER ||--o{ ORDER : places
3
    ORDER ||--|{ LINE-ITEM : contains
4
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

语法请参考 Mermaid。

图表#

1
{
2
  "title": { "text": "最近 30 天" },
3
  "backgroundColor": "transparent",
4
  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
5
  "legend": { "data": ["帖子", "用户", "回帖"] },
6
  "xAxis": [{
7
      "type": "category",
8
      "boundaryGap": false,
9
      "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"],
10
      "axisTick": { "show": false },
11
      "axisLine": { "show": false }
12
  }],
13
  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
14
  "series": [
15
    {
16
      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
17
      "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"]
18
    },
19
    {
20
      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
21
      "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"]
22
    },
23
    {
24
      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
25
      "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"]
26
    }
27
  ]
28
}

可使用如下三种格式定义：

JSON
```
1
{
2
    "propName": "propValue"
3
}
```
JavaScript Object
```
1
{
2
    propName: 'propValue',
3
}
```

返回一个 JavaScript Object 的立即执行函数

1
(() => {
2
    const option = {};
3
    option.propName = `propValue`;
4
    return option;
5
})()

具体语法请参考 ECharts。

五线谱#

1
X: 24
2
T: Clouds Thicken
3
C: Paul Rosen
4
S: Copyright 2005, Paul Rosen
5
M: 6/8
6
L: 1/8
7
Q: 3/8=116
8
R: Creepy Jig
9
K: Em
10
|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
11
"C7"_B2A "B7"=B3|"Em"EEE E2G|
12
"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
13
1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
14
"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
15
"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|

语法请参考 abcjs (github repo: paulrosen/abcjs)。

Graphviz#

1
digraph finite_state_machine {
2
    rankdir=LR;
3
    size="8,5"
4
    node [shape = doublecircle]; S;
5
    node [shape = point ]; qi
6

7
    node [shape = circle];
8
    qi -> S;
9
    S  -> q1 [ label = "a" ];
10
    S  -> S  [ label = "a" ];
11
    q1 -> S  [ label = "a" ];
12
    q1 -> q2 [ label = "ddb" ];
13
    q2 -> q1 [ label = "b" ];
14
    q2 -> q2 [ label = "b" ];
15
}

语法请参考 Graphviz。

Flowchart#

1
st=>start: Start
2
op=>operation: Your Operation
3
cond=>condition: Yes or No?
4
e=>end
5

6
st->op->cond
7
cond(yes)->e
8
cond(no)->op

语法请参考 flowchart.js。

PlantUML#

1
@startuml component
2
actor client
3
node app
4
database db
5
db -> app
6
app -> client
7
@enduml

语法请参考 PlantUML。