常用文档

# Markdown 及扩展

# Markdown

# 表格

| 左对齐        | 居中           | 右对齐  |
| ------------ |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

效果:

做对齐 居中 右对齐
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

# 复选框

- [x] Be awesome
- [ ] Prepare dinner
- [ ] Sleep

效果:

  • [x] Be awesome
  • [ ] Prepare dinner
  • [ ] Sleep

TIP

GitHub 等平台。VuePress 不支持。

# 强调内容

**强调内容**

效果: 强调内容

# VuePress Mardown 拓展

# 自定义容器

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

效果:

TIP

这是一个提示

WARNING

这是一个警告

WARNING

这是一个危险警告

DETAILS

这是一个详情块，在 IE / Edge 中不生效

自定义容器的标题

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
```js
console.log('你好，VuePress！')

效果:

STOP

危险区域，禁止通行

点击查看代码 
console.log('你好，VuePress！')

# Mermaid (opens new window)

代码块类型: mermaid。

# 常规流程图

graph LR;
    Plan[计划] --> Do[执行]
    Do --> Check[检查]
    Check --> Action[处理]
    Action --> |循环| Plan

效果

graph LR;
    Plan[计划] --> Do[执行]
    Do --> Check[检查]
    Check --> Action[处理]
    Action --> |循环| Plan

# 带条件分支的

graph TD;
    t[旅行]
    t --> c1[夏天]

    c1 --> cd1{温度超过30度}
    cd1 --> |是| p1((去商场))
    p1 -->  d[呆2小时]
    d -->  h[回家]

    cd1 --> |否| p2((去海边))
    t --> c2[冬天]
    c2 --> cd3{温度低于30度}
    cd3 --> |是| p1
    cd3 --> |否| p2
    p2 -->  d3[呆1小时]
    d3 -->  h
    h -->  t

效果

graph TD;
    t[旅行]
    t --> c1[夏天]

    c1 --> cd1{温度超过30度}
    cd1 --> |是| p1((去商场))
    p1 -->  d[呆2小时]
    d -->  h[回家]

    cd1 --> |否| p2((去海边))
    t --> c2[冬天]
    c2 --> cd3{温度低于30度}
    cd3 --> |是| p1
    cd3 --> |否| p2
    p2 -->  d3[呆1小时]
    d3 -->  h
    h -->  t

# 人物关系图

graph TD;
f[张三] --> |儿子| 张四
f --> |儿子| 张五
f --> |儿子| 张六
f --> |儿子| 张七
f --> |妻子| w[李四]
w --> |丈夫| f

效果

graph TD;
f[张三] --> |儿子| 张四
f --> |儿子| 张五
f --> |儿子| 张六
f --> |儿子| 张七
f --> |妻子| w[李四]
w --> |丈夫| f

# 饼图

pie title 宠物数
    "狗" : 386
    "猫" : 85
    "其他" : 95

效果

pie title 宠物数
    "狗" : 386
    "猫" : 85
    "其他" : 95

# 时序图

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

效果

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

# 工具

← Git →