Advance Markdown

一个好的富文本编辑器，对技术人员写作提供了方便

# 基本语法

# 标题

  # 这是一级标题
  ## 这是二级标题
  ### 这是三级标题
  #### 这是四级标题
  ##### 这是五级标题
  ###### 这是六级标题

1
2
3
4
5
6

# 加粗、斜体、删除线

**加粗**
*斜体*
***斜体加粗***
~~删除线~~

1
2
3
4

加粗
斜体
斜体加粗
~~删除线~~

# 引用

>这是引用的内容
>>这是引用的内容
>>>>>>>这是引用的内容

1
2
3

这是引用的内容

这是引用的内容

这是引用的内容

# 分割线

---
----
***
*****

1
2
3
4

# 图片

![blockchain](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=702257389,1274025419&amp;fm=27&amp;gp=0.jpg "区块链")

![ARM](/img/arm.png)

1
2
3

blockchain

ARM

# 超链接

[Github](https://github.com/leo94666/markdown-it-advance)

1
2

Github (opens new window)

# 无序列表

- 列表内容
+ 列表内容
* 列表内容

1
2
3

列表内容

列表内容

列表内容

注意：- + * 跟内容之间都要有一个空格

# 有序列表

1. 列表内容
2. 列表内容
3. 列表内容

1
2
3

# 列表嵌套

1. 列表内容
   1. 列表内容1
   2. 列表内容2
2. 列表内容
   1. 列表内容1
   2. 列表内容2
   3. 列表内容3
3. 列表内容

1
2
3
4
5
6
7
8

列表内容
1. 列表内容1
2. 列表内容2
列表内容
1. 列表内容1
2. 列表内容2
3. 列表内容3
列表内容

注意：序号跟内容之间要有空格

# 表格

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

1
2
3
4
5

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

# 代码

# 单行代码

`create database hero;`

1
2

create database hero;

# 代码块

function fun(){
echo "这是一句非常牛逼的代码";
}

function fun(){
         echo "这是一句非常牛逼的代码";
}

1
2
3

# 进阶语法

# Tab选项卡

  :::: tabs

  ::: tab title
  __markdown content__
  :::


  ::: tab javascript
    ``` javascript
    () => {
      console.log('Javascript code example')
    }
    ```
  :::

  ::::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# emoji表情 ok

:tada: :100: :1234: :innocent:

1
2

🎉 💯 🔢 😇

# 自定义容器 ok

  ::: tip
  我是tip自定义容器
  :::

1
2
3

提示

我是tip自定义容器

  ::: warning
  我是warning自定义容器
  :::

1
2
3

注意

我是warning自定义容器

  ::: danger
  我是danger自定义容器
  :::

1
2
3

警告

我是danger自定义容器

  ::: details
  我是details自定义容器，这是一个详情块，在 IE / Edge 中不生效
  :::

1
2
3

点击查看

我是details自定义容器，这是一个详情块，在 IE / Edge 中不生效

# 你也可以自定义块中的标题：

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

1
2
3

STOP

危险区域，禁止通行

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

1
2
3
4
5

点击查看代码

console.log('你好，VuePress！')

  ::: center
  我是center的自定义容器
  :::

1
2
3

我是center的自定义容器

  ::: right
  我是right的自定义容器
  :::

1
2
3

我是right的自定义容器

  ::: note
  我是note自定义容器
  :::

1
2
3

笔记

我是note自定义容器

  ::: theorem 牛顿第一定律 
  假若施加于某物体的外力为零，则该物体的运动速度不变。
  ::: right
  来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
  :::

1
2
3
4
5

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自维基百科 (opens new window)

  ::: cardList
    ```yaml
    - name: 麋鹿鲁哟
      desc: 大道至简，知易行难
      avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
      link: https://www.cnblogs.com/miluluyo/ # 可选
      bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
      textColor: '#6854A1' # 可选，默认var(--textColor)
    - name: XAOXUU
      desc: '#IOS #Volantis主题作者'
      avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
      link: https://xaoxuu.com
      bgColor: '#B9D59C'
      textColor: '#3B551F'
    - name: lookroot的个人空间
      desc: 寻求理想和显示的平衡
      avatar: https://www.lookroot.cn/logo.png
      link: https://www.lookroot.cn/
      bgColor: '#B7DBFF'
      textColor: '#294D71'
    ```
  :::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

麋鹿鲁哟

大道至简，知易行难

XAOXUU

#IOS #Volantis主题作者

lookroot的个人空间

寻求理想和显示的平衡

- name: 麋鹿鲁哟
  desc: 大道至简，知易行难
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
  link: https://www.cnblogs.com/miluluyo/ # 可选
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
  desc: '#IOS #Volantis主题作者'
  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  link: https://xaoxuu.com
  bgColor: '#B9D59C'
  textColor: '#3B551F'
- name: lookroot的个人空间
  desc: 寻求理想和显示的平衡
  avatar: https://www.lookroot.cn/logo.png
  link: https://www.lookroot.cn/
  bgColor: '#B7DBFF'
  textColor: '#294D71'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  ::: cardImgList
    ```yaml
    - name: 麋鹿鲁哟
      desc: 大道至简，知易行难
      img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg
      avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
      link: https://www.cnblogs.com/miluluyo/ # 可选
      bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
      textColor: '#6854A1' # 可选，默认var(--textColor)
    - name: XAOXUU
      desc: '#IOS #Volantis主题作者'
      img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
      avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
      link: https://xaoxuu.com
      bgColor: '#B9D59C'
      textColor: '#3B551F'
    - name: lookroot的个人空间
      desc: 寻求理想和显示的平衡
      img: https://www.lookroot.cn/logo.png
      avatar: https://www.lookroot.cn/logo.png
      link: https://www.lookroot.cn/
      bgColor: '#B7DBFF'
      textColor: '#294D71'
    ```
  :::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

麋鹿鲁哟

大道至简，知易行难

XAOXUU

#IOS #Volantis主题作者

lookroot的个人空间

寻求理想和显示的平衡

- name: 麋鹿鲁哟
  desc: 大道至简，知易行难
  img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
  link: https://www.cnblogs.com/miluluyo/ # 可选
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
  desc: '#IOS #Volantis主题作者'
  img: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  link: https://xaoxuu.com
  bgColor: '#B9D59C'
  textColor: '#3B551F'
- name: lookroot的个人空间
  desc: 寻求理想和显示的平衡
  img: https://www.lookroot.cn/logo.png
  avatar: https://www.lookroot.cn/logo.png
  link: https://www.lookroot.cn/
  bgColor: '#B7DBFF'
  textColor: '#294D71'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 代码块中的语法高亮 ok

    ``` js{1,4,6-7}
    export default { // Highlighted
      data () {
        return {
          msg: `Highlighted!
          This line isn't highlighted,
          but this and the next 2 are.`,
          motd: 'VuePress is awesome',
          lorem: 'ipsum',
        }
      }
    }
    ```

1
2
3
4
5
6
7
8
9
10
11
12
13

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VuePress is awesome',
      lorem: 'ipsum',
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11

# 导入代码段 ok

<<< @/package.json#snippet{1}

{
  "name": "leo946666.github.io",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://gitee.com/leo94666/leo946666.github.io.git",
  "author": "leo <719947897@qq.com>",
  "license": "MIT",
  "description": "leo full stack",
  "private": "true",
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:debug": "vuepress dev docs --debug --open",
    "docs:build": "vuepress build docs",
    "deploy:window": "vuepress build docs && cd ./dist && ../deploy.bat",
    "deploy:unix": "sh deploy.sh"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-decorators": "^7.17.9",
    "@babel/plugin-syntax-jsx": "^7.16.7",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "eslint": "^8.13.0",
    "eslint-plugin-vue": "^8.6.0",
    "lerna": "^4.0.0",
    "vuepress": "^1.9.7"
  },
  "dependencies": {
    "@leo9466/vuepress-theme-leo": "^0.0.7",
    "async-validator": "^4.1.1",
    "core-js": "^3.22.2",
    "dayjs": "^1.11.1",
    "element-ui": "^2.15.8",
    "lru-cache": "^7.8.1",
    "prismjs": "^1.28.0",
    "ts-jest": "27.1.4",
    "ts-node": "10.7.0",
    "typescript": "^4.6.3",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.6",
    "vue-toasted": "^1.1.28"
  },
  "directories": {
    "doc": "docs"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 下标 ok

H~2~0

H₂0

# 上标 ok

29^th^

29^th

# 标签 ins mark abbr ok


++ins++
==mark==

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

1
2
3
4
5
6
7
8
9

ins

mark

The HTML specification
is maintained by the W3C.

# MathJax ok

在线编辑公式 (opens new window)

$\sqrt{3x-1}+(1+x)^2$

$$\begin{array}{c}
 
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
 
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
 
\nabla \cdot \vec{\mathbf{B}} & = 0
 
\end{array}$$

1
2
3
4
5
6
7
8
9
10

假设 $y >= 0$ , 而 $[\log x]$ 表示 $\log x$ 的整数部分, 设:

$$\Phi (y) = \frac {1} {2 \pi i} \int_{2 - i \infty}^{2 + i \infty} \frac {y^{\omega} \mathrm{d} \omega} {\omega \left(1 + \frac {\omega} {(\log x)^{1.1}}\right)^{[ \log x ] + 1}}, x > 1$$

显见， 当 $0 <= y <= 1$ 时， 有 $\Phi(y) = 0$. 对于所有 $y >= 0$, 则 $\Phi(y)$ 是一个非减函数.

当 $\log x>= 10^4$ 及 $y>= e^{2{(\log x)}^{-0.1}}$ 时， 则有:

$$1 - x^{- 0.1} <= \Phi (y) <= 1$$

1
2
3
4
5
6
7
8
9

假设 , 而表示的整数部分, 设:

显见，当时，有 . 对于所有 , 则是一个非减函数.

当及时，则有:

# flowchar ok

  @flowstart
  st=>start: Start|past:>http://www.google.com[blank]
  e=>end: End|future:>http://www.google.com
  op1=>operation: My Operation|past
  op2=>operation: Stuff|current
  sub1=>subroutine: My Subroutine|invalid
  cond=>condition: Yes
  or No?|approved:>http://www.google.com
  c2=>condition: Good idea|rejected
  io=>inputoutput: catch something...|future

  st->op1(right)->cond
  cond(yes, right)->c2
  cond(no)->sub1(left)->op1
  c2(yes)->io->e
  c2(no)->op2->e
  @flowend

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# mermaid charts beta

# Flowchart

    ```mermaid
    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    ```

1
2
3
4
5
6
7

graph TD; A-->B; A-->C; B-->D; C-->D;

# Sequence diagram

    ```mermaid
      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!
    ```

1
2
3
4
5
6
7
8
9
10
11
12
13

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
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

# Class diagram

    ```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

    ```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

# Git graph - exclamation experimental

    ```mermaid
      gitGraph:
        options
        {
            "nodeSpacing": 150,
            "nodeRadius": 10
        }
        end
        commit
        branch newbranch
        checkout newbranch
        commit
        checkout master
        commit
        merge newbranch

    ```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Lexical error on line 14. Unrecognized text.
...t master    commit    merge newbranch
---------------------^

# Entity Relationship Diagram - exclamation experimental

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

# State


  stateDiagram-v2
  [*] --> Still
  Still --> [*]
  Still --> Moving
  Moving --> Still
  Moving --> Crash
  Crash --> [*]

1
2
3
4
5
6
7
8
9
10

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

# User Journey Diagram

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: 3: Me

# Pie

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

# Gantt diagram

    ```mermaid
    gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

    ```

1
2
3
4
5
6
7
8
9
10
11

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

# element-ui

    :::: el-tabs

    ::: el-tab-pane label=title
    __markdown content__
    :::


    ::: el-tab-pane label=javascript
    ``` javascript
    () => {
      console.log('Javascript code example')
    }
    ```
    :::

    ::::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# TypeScript beta

{{ msg }}

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data: () => ({
    msg: 'Hello, TypeScript in Markdown!',
  }),
})
</script>

1
2
3
4
5
6
7
8
9
10
11

# Vue组件

# 时间线

2018年

前端

第一次接触了Vue.js
2016年

毕业了

第一次开始工作，软件工程师，开始接触了后端开发、Android开发、Android Framework开发！
2014年

第一次接触了Android

人生第一次用的智能手机是三星Android手机，从那时候起就开始对Android感到兴趣！
2012年9月1日

开启大学四年学习生涯

第一次接触了c语言, 第一次接触了嵌入式软硬件开发，第一次接触了原生的HTNML、CSS、JavaScript等，一切都是那么美好！

# Space

# Badge

<Badge text="演示" />

这是默认主题内置的 <Badge /> 组件演示

# 代码选项卡

yarn add vuepress-theme-vdoing -D

npm install vuepress-theme-vdoing -D

void main(){

}

1
2
3

// Make sure to add code blocks to your code group

# Lottie

# 其他

Hello this is <Foo-Bar>

Hello this is <demo-1>

This is another component

Upgrade Path

编辑此页

#Markdown

上次更新: 2022-04-28, 11:21:32