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 语法，提供更加丰富的写作功能。

选项卡

apple

Apple

banana

Banana

orange

Orange

• 查看详情

脚注

此文字有脚注^[1].

• 查看详情

导入文件

• 查看详情

幻灯片

• 查看详情

TeX 语法

$$\frac{{\partial }^r}{\partial {\omega }^r}\left(\frac{y^{\omega }}{\omega }\right)=\left(\frac{y^{\omega }}{\omega }\right)\{(\log y{)}^r+\sum _{i=1}^r\frac{(-1{)}^{i}r\cdots (r-i+1)(\log y{)}^{r-i}}{{\omega }^i}\}$$

• 查看详情

任务列表

• 计划 1
• 计划 2

查看详情

图片增强

支持为图片设置颜色模式和大小。

• 查看详情

上下角标

19^th H₂O

• 查看详情

组件

Mr.Hope

---

Where there is light, there is hope

• 查看详情

提示容器

安全的在 Markdown 中使用 {{ variable }}。

自定义标题

信息容器，包含 代码 与 链接。

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

• GitHub 警示
• 提示框

自定义对齐

我是居中的

我在右对齐

• 查看详情

属性支持

一个拥有 ID 的 单词。

• 查看详情

标记

你可以标记 重要的内容 。

• 查看详情

剧透

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

• View Detail

代码块

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

• 查看详情

代码演示

一个普通 Demo

<h1>VuePress Theme Hope</h1>
<p><span id="very">非常</span>强大!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});

span {
  color: red;
}

• 查看详情

交互演示

UnoCSS 示例

• 查看详情

Kotlin 交互演示

Simple Playground

class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)
}

• 查看详情

Sandpack 交互演示

Vue 示例

<script setup>
import { ref } from "vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

Open Sandbox

• 查看详情

Vue 交互演示

Vue 交互演示

• 查看详情

---

1. 这是脚注内容 ↩︎