Markdown 展示
VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。
你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。
Markdown 介绍
如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。
Markdown 配置
VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。
相关信息
Frontmatter 是 VuePress 中很重要的一个概念，如果你不了解它，你需要阅读 Frontmatter 介绍。
Markdown 扩展
VuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展 。
VuePress 扩展
为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。
关于这些扩展，请阅读 VuePress 中的 Markdown 扩展。
主题扩展
通过 vuepress-plugin-md-enhance，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。
一键启用
你可以设置在主题选项中设置 plugins.mdEnhance.enableAll: true 启用 md-enhance 插件的所有功能。
::: code-tabs#language
@tab TS
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
enableAll: true,
},
},
}),
};
@tab JS
const { hopeTheme } = require("vuepress-theme-hope");
module.exports = {
theme: hopeTheme({
plugins: {
mdEnhance: {
enableAll: true,
},
},
}),
};
:::
自定义容器
::: v-pre
安全的在 Markdown 中使用 。
:::
自定义标题
提示容器
自定义标题
警告容器
自定义标题
危险容器
自定义标题
详情容器
代码
::: v-pre
安全的在 Markdown 中使用 {{ variable }}。
:::
::: info 自定义标题
信息容器
:::
::: tip 自定义标题
提示容器
:::
::: warning 自定义标题
警告容器
:::
::: danger 自定义标题
危险容器
:::
::: details 自定义标题
详情容器
:::
代码块
::: code-tabs
@tab pnpm
pnpm add -D vuepress-theme-hope
@tab yarn
yarn add -D vuepress-theme-hope
@tab:active npm
npm i -D vuepress-theme-hope
:::
自定义对齐
::: center
我是居中的
:::
::: right
我在右对齐
:::
上下角标
19^th^ H~2~O
脚注
此文字有脚注^first.
标记
你可以标记 ==重要的内容== 。
任务列表
[x] 计划 1
[ ] 计划 2
图片增强
支持为图片设置颜色模式和大小
图表
::: chart 一个散点图案例
{
"type": "scatter",
"data": {
"datasets": [
{
"label": "散点数据集",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 10 },
{ "x": 10, "y": 5 },
{ "x": 0.5, "y": 5.5 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
},
"options": {
"scales": {
"x": {
"type": "linear",
"position": "bottom"
}
}
}
}
:::
Echarts
::: echarts 一个折线图案例
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [150, 230, 224, 218, 135, 147, 260],
"type": "line"
}
]
}
:::
流程图
cond=>condition: 是否执行操作?
process=>operation: 操作
e=>end: 结束
cond(yes)->process->e
cond(no)->e
Mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
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} $$
导入文件
@include(./README.md{11-17})
代码演示
::: normal-demo 一个普通 Demo
<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>
document.querySelector("#very").addEventListener("click", () => {
alert("非常强大");
});
span {
color: red;
}
:::
样式化
设置它没有任何效果，请不要这样使用