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）