Markdown 增强

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

# 新增的更多语法

# 上下角标

19^th H₂O

代码

19^th^ H~2~O

1

• 点击查看 (opens new window)

# 自定义对齐

我是居中的

我在右对齐

代码

::: center

我是居中的

:::

::: right

我在右对齐

:::

1 2 3 4 5 6 7 8 9 10 11

• 点击查看 (opens new window)

# 脚注

此文字有脚注^[1].

代码

此文字有脚注[^first].[^first]: 这是脚注内容

1 2 3

• 点击查看 (opens new window)

# 标记

你可以标记 重要的内容 。

代码

你可以标记 ==重要的内容== 。

1

• 点击查看 (opens new window)

# 任务列表

• 计划 1
• 计划 2

Code

- [x] 计划 1
- [ ] 计划 2

1 2

• 点击查看 (opens new window)

# 流程图

代码

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

• 点击查看 (opens new window)

# Mermaid

代码

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

1 2 3 4 5 6 7

• 点击查看 (opens new window)

# Tex 语法

∂ r ∂ ω r ( y ω ω ) = ( y ω ω ) { ( log ⁡ y ) r + ∑ i = 1 r ( − 1 ) i r ⋯ ( r − i + 1 ) ( log ⁡ y ) r − i ω 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\} ∂ωr∂r​(ωyω​)=(ωyω​){(logy)r+i=1∑r​ωi(−1)ir⋯(r−i+1)(logy)r−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\}
$$

1 2 3 4

• 点击查看 (opens new window)

# 代码案例

<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>

1 2

document.querySelector("#very").addEventListener("click", () => {
  alert("十分帅");
});

1 2 3

span {
  color: red;
}

1 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

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

.box-react span {
  color: red;
}

1 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

<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

代码

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

# 标题

十分帅

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

代码

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

• 点击查看 (opens new window)

# 幻灯片

代码

@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

• 点击查看 (opens new window)

# 其他语法

自定义标题

信息容器

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码

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

---

1. 这是脚注内容 ↩︎