Markdown 增强
Stephen Cui ... 2021-9-26 About 3 min
vuepress-theme-hope 通过内置 md-enhance (opens new window)，在 Markdown 中启用了更多的语法与新功能。
# 一键启用
你可以设置 themeconfig.mdEnhance.enableAll 启用 md-enhance (opens new window) 插件的所有功能。
module.exports = {
themeConfig: {
mdEnhance: {
enableAll: true,
},
},
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 新增的更多语法
# 上下角标
19^th^ H~2~O
代码
19^th^ H~2~O
1
# 自定义对齐
我是居中的
我在右对齐
代码
::: center
我是居中的
:::
::: right
我在右对齐
:::
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 脚注
此文字有脚注[1].
代码
此文字有脚注[^first].
[^first]: 这是脚注内容
1
2
3
2
3
# 标记
你可以标记 ==重要的内容== 。
代码
你可以标记 ==重要的内容== 。
1
# 任务列表
- [x] 计划 1
- [ ] 计划 2
Code
- [x] 计划 1
- [ ] 计划 2
1
2
2
# 流程图
cond=>condition: Process?
process=>operation: Process
e=>end: End
cond(yes)->process->e
cond(no)->e
1
2
3
4
5
6
2
3
4
5
6
代码
```flow
cond=>condition: Process?
process=>operation: Process
e=>end: End
cond(yes)->process->e
cond(no)->e
```
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Mermaid
代码
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
1
2
3
4
5
6
7
2
3
4
5
6
7
# Tex 语法
$$ \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right} $$
代码
$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}
$$
1
2
3
4
2
3
4
# 代码案例
::: demo 一个普通 Demo
<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>
1
2
2
document.querySelector("#very").addEventListener("click", () => {
alert("十分帅");
});
1
2
3
2
3
span {
color: red;
}
1
2
3
2
3
:::
代码
::: demo 一个普通 Demo
```html
<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("十分帅");
});
```
```css
span {
color: red;
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
::: demo [react] 一个 React Demo
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: "十分帅" };
}
render() {
return (
<div className="box-react">
Mr.Hope <span>{this.state.message}</span>
</div>
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.box-react span {
color: red;
}
1
2
3
2
3
:::
代码
::: demo [react] 一个 React Demo
```js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: "十分帅" };
}
render() {
return (
<div className="box-react">
Mr.Hope <span>{this.state.message}</span>
</div>
);
}
}
```
```css
.box-react span {
color: red;
}
```
:::
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
::: demo [vue] 一个 Vue Demo
<template>
<div class="box">
Mr.Hope <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "十分帅" }),
};
</script>
<style>
.box span {
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:::
代码
::: demo [vue] 一个 Vue Demo
```vue
<template>
<div class="box">
Mr.Hope <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "十分帅" }),
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
::: demo 一个普通 Demo
# 标题
十分帅
1
2
3
2
3
const message: string = "Mr.Hope";
document.querySelector("h1").innerHTML = message;
1
2
3
2
3
h1 {
font-style: italic;
+ p {
color: red;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
:::
代码
::: demo 一个普通 Demo
```md
# 标题
十分帅
```
```ts
const message: string = "Mr.Hope";
document.querySelector("h1").innerHTML = message;
```
```scss
h1 {
font-style: italic;
+ p {
color: red;
}
}
```
:::
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 幻灯片
@slidestart
# 幻灯片 1
一个有文字和 链接 (opens new window) 的段落
# 幻灯片 2
- 列表 1
- 列表 2
# 幻灯片 3.1
const a = 1;
1
--
# 幻灯片 3.2
$$ J(\theta_0,\theta_1) = \sum_{i=0} $$
@slideend
代码
@slidestart
## 幻灯片 1
一个有文字和 [链接](https://mrhope.site) 的段落
---
## 幻灯片 2
- 列表 1
- 列表 2
---
## 幻灯片 3.1
```js
const a = 1;
```
--
## 幻灯片 3.2
$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$
@slideend
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
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
# 其他语法
自定义标题
信息容器
自定义标题
提示容器
自定义标题
警告容器
自定义标题
危险容器
自定义标题
详情容器
代码
::: info 自定义标题
信息容器
:::
::: tip 自定义标题
提示容器
:::
::: warning 自定义标题
警告容器
:::
::: danger 自定义标题
危险容器
:::
::: details 自定义标题
详情容器
:::
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
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
这是脚注内容 ↩︎