Markdown 增强
【摘要】
vuepress-theme-hope 通过内置 md-enhance
(opens new window)，在 Markdown 中启用了更多的语法与新功能。
# 一键启用
你可以设置 themeconfig.mdEnhance.enableAll 启用 md-enhance
...
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
# 新增的更多语法
# 上下角标
19th H2O
代码
19^th^ H~2~O
1
# 自定义对齐
我是居中的
我在右对齐
代码
-
::: center
-
-
我是居中的
-
-
:::
-
-
::: right
-
-
我在右对齐
-
-
:::
1 2 3 4 5 6 7 8 9 10 11
# 脚注
此文字有脚注[1].
代码
此文字有脚注[^first].[^first]: 这是脚注内容
1 2 3
# 标记
你可以标记 重要的内容 。
代码
你可以标记 ==重要的内容== 。
1
# 任务列表
- 计划 1
- 计划 2
Code
-
- [x] 计划 1
-
- [ ] 计划 2
1 2
# 流程图
代码
-
```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
代码
-
```mermaid
-
graph TD;
-
A-->B;
-
A-->C;
-
B-->D;
-
C-->D;
-
```
1 2 3 4 5 6 7
# 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
# 代码案例
-
<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
# 幻灯片
代码
-
@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
# 其他语法
自定义标题
信息容器
自定义标题
提示容器
自定义标题
警告容器
自定义标题
危险容器
自定义标题
详情容器
代码
-
::: 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
这是脚注内容 ↩︎
文章来源: springlearn.blog.csdn.net，作者：西魏陶渊明，版权归原作者所有，如需转载，请联系作者。
原文链接：springlearn.blog.csdn.net/article/details/125857996
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）