vuepress-theme-hope enables more syntax in Markdown via the built-in md-enhance (opens new window) plugin.
# Enable all
You can set themeconfig.mdEnhance.enableAll to enable all features of the md-enhance (opens new window) 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
19^th^ H~2~O
Code
19^th^ H~2~O
1
# Align
::: center
I am center
:::
::: right
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[^first].
[^first]: This is footnote content
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
- [x] Plan A
- [ ] Plan B
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
$$ \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} $$
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
<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
::: 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
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
::: demo [react] 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
<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
::: demo [vue] 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
# 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
::: 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
@slidestart
# Slide 1
A paragraph with some text and a link (opens new window)
# Slide 2
- Item 1
- Item 2
# Slide 3.1
const a = 1;
1
--
# Slide 3.2
$$ J(\theta_0,\theta_1) = \sum_{i=0} $$
@slideend
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