排版元素
行级元素
-
块引用
-
图片
可通过复制粘贴或拖拽来上传图片；上传后的图片可通过拖拽进行大小调整。
-
加粗
-
倾斜
-
下划线
-
删除线 -
标记
-
上标
-
下标
-
快捷键
-
标签#
-
行级代码 -
$a^2 + b^2 = \color{red}c^2$
-
备注（这是一个行级备注）
-
颜色 1 颜色 2 颜色 3 颜色 4 颜色 5 颜色 6 颜色 7 颜色 8 颜色 9 颜色 10 颜色 11 颜色 12 颜色 13
特效 1 特效 2
-
通过输入
:加字母触发表情字符搜索 ❓ ❤️ ☕️
超级块
段落一
段落二居中
段落三
段落四居右
嵌入块
在((20230415111858-vgohvf3 "思源"))中，唯一重要的核心概念是((20200813004931-q4cu8na "内容块"))。通过排版格式即可形成内容块，这样我们就能在块级粒度上对思绪和知识进行整理，同时也能方便长文阅读和输出。
在((20230415111858-vgohvf3 "思源"))中，唯一重要的核心概念是((20200813004931-q4cu8na "内容块"))。通过排版格式即可形成内容块，这样我们就能在块级粒度上对思绪和知识进行整理，同时也能方便长文阅读和输出。
标题块
有序、无序、任务列表
无序列表
-
Java
-
Spring
- IoC
- AOP
-
-
Go
- gofmt
- Wide
-
Node.js
- Koa
- Express
有序列表
-
Node.js
- Express
- Koa
- Sails
-
Go
- gofmt
- Wide
-
Java
- Latke
- IDEA
任务列表
引述块
注意不是内容块引用，而是引述块（Blockquote）。
代码块
如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如：
演示 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...
表格
| header 1 | header 2 |
|---|---|
| cell 1 | cell 2 |
| cell 3 | cell 4 |
| cell 5 | cell 6 |
HTML 块
你 好 世 界Hello World
更多细节请参考 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
视频
音频
脑图
- 教程
- 语法指导
- 普通内容
- 提及用户
- 表情符号 Emoji
- 一些表情例子
- 大标题 - Heading 3
- Heading 4
- Heading 5
- Heading 6
- 图片
- 代码块
- 普通
- 语法高亮支持
- 演示 Go 代码高亮
- 演示 Java 高亮
- 有序、无序、任务列表
- 无序列表
- 有序列表
- 任务列表
- 表格
- 隐藏细节
- 段落
- 链接引用
- 数学公式
- 脑图
- 流程图
- 时序图
- 甘特图
- 图表
- 五线谱
- Graphviz
- 多媒体
- 脚注
- 快捷键
使用 Markdown 列表语法渲染脑图。
流程图
graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end语法请参考 Mermaid。
时序图
sequenceDiagram Alice->>John: Hello John, how are you? loop Every minute John-->>Alice: Great! end语法请参考 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语法请参考 Mermaid。
类图
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label语法请参考 Mermaid。
用户游历图
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: 5: Me语法请参考 Mermaid。
Git 图
gitGraph commit commit branch develop commit commit commit checkout main commit commit语法请参考 Mermaid。
实体关系图
erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses语法请参考 Mermaid。
图表
{
"title": { "text": "最近 30 天" },
"backgroundColor": "transparent",
"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"]
}
]
}
可使用如下三种格式定义：
-
JSON
{ "propName": "propValue" } -
JavaScript Object
{ propName: 'propValue', } -
返回一个 JavaScript Object 的立即执行函数
(() => { const option = {}; option.propName = `propValue`; return option; })()
具体语法请参考 ECharts。
五线谱
%%params {tablature: [{instrument: "violin"}]}
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:|
可在首行加入 %%params JSON ，使 JSON 作为 renderAbc options 的参数。
语法请参考 abcjs (github repo: paulrosen/abcjs)。
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" ];
}
语法请参考 Graphviz。
Flowchart
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
语法请参考 flowchart.js。
PlantUML
@startuml component
actor client
node app
database db
db -> app
app -> client
@enduml
语法请参考 PlantUML。
标签：Em,05,--,元素,语法,2019,Go,排版 From： https://www.cnblogs.com/readdad/p/18293833/typesetting-element-h90vu