Markdown Enhance
Mr.Hope ... 2022-9-24 About 3 min
vuepress-theme-hope enables more syntax in Markdown via the built-in md-enhance plugin.
# Enable all
You can set themeconfig.mdEnhance.enableAll to enable all features of the md-enhance plugin.
module.exports = {
themeConfig: {
mdEnhance: {
enableAll: true,
},
},
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# New Feature
# Superscript and Subscript
19th H2O
Code
19^th^ H~2~O
1
# Align
I am center
I am right align
Code
::: center
I am center
:::
::: right
I am right align
:::
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Footnote
This text has footnote[1].
Code
This text has footnote[^first].
[^first]: This is footnote content
1
2
3
2
3
# Mark
You can mark important words .
Code
You can mark ==important words== .
1
# Tasklist
Code
- [x] Plan A
- [ ] Plan B
1
2
2
# Flowchart
Code
```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
Code
```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
Code
$$
\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
A normal demo
<h1>Mr.Hope</h1>
<p>Is <span id="very">very</span> handsome</p>
1
2
2
document.querySelector("#very").addEventListener("click", () => {
alert("Very handsome!");
});
1
2
3
2
3
span {
color: red;
}
1
2
3
2
3
Code
::: normal-demo A normal demo
```html
<h1>Mr.Hope</h1>
<p>Is <span id="very">very</span> handsome</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("Very handsome!");
});
```
```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
A react demo
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: "very handsome" };
}
render() {
return (
<div className="box-react">
Mr.Hope is <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
Code
::: react-demo A react demo
```js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: "very handsome" };
}
render() {
return (
<div className="box-react">
Mr.Hope is <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
A vue demo
<template>
<div class="box">
Mr.Hope is <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "very handsome" }),
};
</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
Code
::: vue-demo A vue demo
```vue
<template>
<div class="box">
Mr.Hope is <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "very handsome" }),
};
</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
A normal demo
# Title
is very handsome.
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
Code
::: normal-demo A normal demo
```md
# Title
is very handsome.
```
```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
# Presentation
Code
@slidestart
## Slide 1
A paragraph with some text and a [link](https://mrhope.site)
---
## Slide 2
- Item 1
- Item 2
---
## Slide 3.1
```js
const a = 1;
```
--
## Slide 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
# Other Syntax
custom title
A custom information container
custom title
A custom tip container
custom title
A custom warning container
custom Title
A custom danger container
custom title
A custom details container
Code
::: info custom title
A custom information container
:::
::: tip custom title
A custom tip container
:::
::: warning custom title
A custom warning container
:::
::: danger custom Title
A custom danger container
:::
::: details custom title
A custom details container
:::
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
This is footnote content ↩︎