Leanote 支持 emoji、chart.js 以及 mermaid

本文转载自[Leanote 支持 Mermaid，Chartjs 及修复 Bug](https://blog.ctaoist.cn/blog/post/ctaoist/Leanote%E6%94%AF%E6%8C%81Mermaid-Chartjs%E5%8F%8A%E4%BF%AE%E5%A4%8DBug)

[emoji完整列表](https://emoji-css.afeld.me/)

用法：把emoji的名称去掉前缀`em-`，前后各用1个`:`包起来即可
emoji 效果展示：

代码：

:zap: 
效果：

::: success
:zap: This is the the success container
:::

代码：

:tada: 
效果：

::: info
:tada: This is the info container
:::

代码：

:fire: 
效果：

::: danger
:fire: This is the danger container
:::

代码：

:mega: 
效果：

::: warning
:mega: This is the warn container
:::

----------

时序图：

```mermaid
    sequenceDiagram
    A->> B: Query
    B->> C: Forward query
    Note right of C: Thinking...
    C->> B: Response
    B->> A: Forward response
    ```

```mermaid
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
```

----------

甘特图：

```mermaid
    gantt
    title Title Example
    section sectionA
    taskA: done, 2021-2-4, 1d
    taskB: 2021-2-5, 1d
    taskC: active, 2021-2-6, 3d
    taskD: crit, 2021-2-9, 2d
    section 任务2
    子任务1: active, des3, 2021-2-5, 4d
    子任务2: des4, after des3, 3d
    ```

```mermaid
gantt
title Title Example
section sectionA
taskA: done, 2021-2-4, 1d
taskB: 2021-2-5, 1d
taskC: active, 2021-2-6, 3d
taskD: crit, 2021-2-9, 2d
section 任务2
子任务1: active, des3, 2021-2-5, 4d
子任务2: des4, after des3, 3d
```

----------

Chart的圆饼图：

```chart
    {
      "type": "pie",
      "data": {
        "labels": [
          "Red",
          "Blue",
          "Yellow"
        ],
        "datasets": [
          {
            "data": [
              300,
              50,
              100
            ],
            "backgroundColor": [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
            ]
          }
        ]
      },
      "options": {
        "responsive": false
      }
    }
    ```

```chart
{
  "type": "pie",
  "data": {
    "labels": [
      "Red",
      "Blue",
      "Yellow"
    ],
    "datasets": [
      {
        "data": [
          300,
          50,
          100
        ],
        "backgroundColor": [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }
    ]
  },
  "options": {
    "responsive": false
  }
}
```

Leanote 支持 emoji、chart.js 以及 mermaid

最近更新

热门标签

文章目录