Markdown Enhance

Mr.Hope ... 2021-6-15 Guide
  • Markdown
About 3 min

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

# 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

# Footnote

This text has footnote[1].

Code
This text has footnote[^first].

[^first]: This is footnote content
1
2
3

# Mark

You can mark important words .

Code
You can mark ==important words== .
1

# Tasklist

Code
- [x] Plan A
- [ ] Plan B
1
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

# Mermaid

Code
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
1
2
3
4
5
6
7

# Tex

rωr(yωω)=(yωω){(logy)r+i=1r(1)ir(ri+1)(logy)riωi}\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

# Demo

<h1>Mr.Hope</h1>
<p>Is <span id="very">very</span> handsome</p>
1
2
document.querySelector("#very").addEventListener("click", () => {
  alert("Very handsome!");
});
1
2
3
span {
  color: red;
}
1
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
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
.box-react span {
  color: red;
}
1
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
<template>
  <div class="box-vue">
    Mr.Hope is <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "very handsome" }),
};
</script>
<style>
.box-vue span {
  color: red;
}
</style>
1
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-vue">
    Mr.Hope is <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "very handsome" }),
};
</script>
<style>
.box-vue 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
# Title

is very handsome.
1
2
3
const message: string = "Mr.Hope";

document.querySelector("h1").innerHTML = message;
1
2
3
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
1
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

# 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

# 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

  1. This is footnote content ↩︎