Markdown 展示
VuePress 主要从 Markdown 文件生成页面。因此,你可以使用它轻松生成文档或博客站点。
你需要创建并编写 Markdown,以便 VuePress 可以根据文件结构将它们转换为不同的页面。
Markdown 介绍
如果你是一个新手,还不会编写 Markdown,请先阅读 Markdown 介绍 和 Markdown 演示。
Markdown 配置
VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。
Frontmatter
Frontmatter 是 VuePress 中很重要的一个概念,请阅读 Frontmatter 介绍 了解详情。
Markdown 扩展
VuePress 会使用 markdown-it 来解析 Markdown 内容,因此可以借助于 markdown-it 插件来实现 语法扩展 。
VuePress 扩展
为了丰富文档写作,VuePress 对 Markdown 语法进行了扩展。
关于这些扩展,请阅读 VuePress 中的 Markdown 扩展。
主题扩展
通过 vuepress-plugin-md-enhance
,主题扩展了更多 Markdown 语法,提供更加丰富的写作功能。
选项卡
::: tabs#fruit
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
脚注
此文字有脚注^first.
导入文件
TeX 语法
任务列表
- [x] 计划 1
- [ ] 计划 2
图片增强
支持为图片设置颜色模式和大小。
上下角标
19th H2O
组件
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
background: rgba(253, 230, 138, 0.15)
提示容器
安全的在 Markdown 中使用 {{ variable }}。
自定义标题
提示容器
自定义标题
警告容器
自定义标题
危险容器
自定义标题
详情容器
自定义对齐
::: center
我是居中的
:::
::: right
我在右对齐
:::
属性支持
一个拥有 ID 的 单词{#word}。
标记
你可以标记 ==重要的内容== 。
剧透
VuePress Theme Hope !!十分强大!!.
样式化
向 Mr.Hope 捐赠一杯咖啡。 Recommended
图表
ECharts
流程图
MarkMap
Mermaid
PlantUML
@startuml Alice -> Bob: 认证请求
alt 成功情况
Bob -> Alice: 认证接受
else 某种失败情况
Bob -> Alice: 认证失败
group 我自己的标签
Alice -> Log : 开始记录攻击日志
loop 1000次
Alice -> Bob: DNS 攻击
end
Alice -> Log : 结束记录攻击日志
end
else 另一种失败
Bob -> Alice: 请重复
end @enduml
代码块
::: 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
:::