Leanote 支持 Mermaid，Chartjs 及修复 Bug

## 支持 emoji、chart.js 以及 mermaid

参考的大佬地址：https://github.com/jim3ma/leanote

1. 下载 [note.html](https://cdn.jsdelivr.net/gh/ctaoist/leanote@2.7.0/app/views/note/note.html) 替换 `leanote/app/views/note/note.html`
2. 下载 [note-dev.html](https://cdn.jsdelivr.net/gh/ctaoist/leanote@2.7.0/app/views/note/note-dev.html) 替换 `leanote/app/views/note/note-dev.html`
3. 下载 [md2html.js](https://down.ctaoist.cn/leanote/md2html.js) 替换 `leanote/public/libs/md2html/md2html.js`
4. 下载 [main-v2.js](https://cdn.jsdelivr.net/gh/ctaoist/leanote@2.7.0/public/md/main-v2.js) 替换 `leanote/public/md/main-v2.js`
5. 下载 [default.css](https://cdn.jsdelivr.net/gh/ctaoist/leanote@2.7.0/public/md/themes/default.css) 替换 `leanote/public/md/themes/default.css`

>注：下载这些文件要用**右键-另存为**。

写了个一次性替换脚本：[update_leanote.sh](/downloads/leanote/update_leanote.sh)，使用方法：

```sh
update_leanote.sh leanote_path # 脚本后面跟 leanote 的根目录
```

### 效果展示

图标大全[地址](https://emoji-css.afeld.me/)

emoji 效果展示：

```Markdown
::: success
:zap: This is the success container
:::
```

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

```Markdown
::: info
:tada: Thies is the info container
:::
```

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

```Markdown
::: danger
:fire: This is the danger container
:::
```

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

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

::: warning
:mega: Thies 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
  }
}
```

## 中文 toc 转码导致跳转报错

网页版leanote调用的是 `leanote/app/views/note/note.html` 这个文件来显示页面，里面调用的是 `leanote/public/js/markdonw-v2.min.js` 这个markdown编辑器;

Desktop-app版本调用的是 `leanote/app/views/note/note-dev.html` 这个文件来显示页面，里面调用的是 `public/md/main-v2.min.js` 这个markdown 编辑器。

网页版的话使用 [markdown-v2_fix_toc.min.js](https://down.ctaoist.cn/leanote/markdown-v2_fix_toc.min.js) 替换 `leanote/public/js` 中的 `markdown-v2.min.js`。

>下载这个要用**右键-另存为**。

Desktop-app 版本直接用下面章节的 `main-v2.js` 代替原来的就行。

## 博客 toc 跳转无效

修改 `leanote/public/blog/js/common.js`，`scrollTo()` 方法前面添加一个 `windows.`：

```js
// scrollTo在page.js中定义
titles += '<li class="nav-' + tagName + '"><a data-a="' + tagName + '-' + encodeURI(text)+'" onclick="scrollTo(this, \'' + tagName + '\', \'' + text + '\')">' + text + '</a></li>';
```

修改成：

```js
// scrollTo在page.js中定义
titles += '<li class="nav-' + tagName + '"><a data-a="' + tagName + '-' + encodeURI(text)+'" onclick="window.scrollTo(this, \'' + tagName + '\', \'' + text + '\')">' + text + '</a></li>';
```

Leanote 支持 Mermaid，Chartjs 及修复 Bug

最近更新

热门标签

文章目录