快速上手

小于 1 分钟

通过安装并启用此插件，你可以在 Markdown 中使用更多的语法。

VuePress 内置的增强功能

VuePress 本身新增了一些 Markdown 语法，详见官方文档。

树摇

最终输出只会包含你启用功能的代码，所以无需担心你的网站大小。

图表

此插件提供了 6 种方法让你将图表插入到 Markdown 文件中。

Chart.js：一个轻量级、易于使用、高度可定制的图表库。
与 ECharts 相比，Chart.js 更轻量。
ECharts：一个强大的、交互式的浏览器图表和可视化库。
与 Chart.js 相比，ECharts 更强大。
flowchart: Markdown 扩展，用于生成流程图和序列图。
轻量级，只关注流程图。
Markmap: 从 Markdown 生成思维导图
运行环境非常重，不推荐使用。
Mermaid：从 Markdown 生成图表和流程图。
常用图表的强大集合。
Plantuml: 基于 Java 的 UML 图表
没有任何运行时，极其轻量。

Chart.js

一个散点图案例

查看详情

ECharts

一个折线图案例

查看详情

代码

此插件提供以下功能来增强代码编写。

代码演示：在浏览器中显示和运行代码片段。
交互演示：嵌入外部演示站点。
Kotlin 交互演示：响应式 Kotlin 演示。
Vue 交互演示：响应式 Vue 演示。

代码演示

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

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

span {
  color: red;
}

查看详情

交互演示

查看详情

Kotlin 交互演示

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

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

查看详情

Vue 交互演示

查看详情

Sandpack 交互演示

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

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

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

Open Sandbox

查看详情