快速上手

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

VuePress 内置的增强功能

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

树摇

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

语法

该插件向 Markdown 引入了以下新语法。

• 图像：转换为图形，根据配色方案和设置尺寸进行切换
• 上标和下标
• 任务列表
• TeX：支持 KaTeX 和 Mathjax

图片增强

支持设置标题、颜色模式和大小

• 查看详情

上下角标

19^th H₂O

• 查看详情

任务列表

• 计划 1
• 计划 2

查看详情

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}\}$$

• 查看详情

内容

此插件提供以下方法来丰富您的内容。

• 组件: 快速创建组件
• 脚注: 对关键内容做补充说明
• 导入文件: 轻松拆分或复用文件
• 幻灯片: 展示内容

组件

Mr.Hope

---

Where there is light, there is hope

• 查看详情

脚注

此文字有脚注^[1].

• 查看详情

导入文件

• 查看详情

幻灯片

• 查看详情

选项卡

apple

Apple

banana

Banana

orange

Orange

• 查看详情

样式化

该插件提供以下功能来样式化您的内容：

• 警告: GFM 风格的警告
• 自定义对齐: 自定义内容对齐方式
• 提示容器: 将内容包裹在不同类型的提示框中
• 属性支持: 为 Markdown 内容添加属性
• 标记: 突出显示内容
• Stylize: 可定制的令牌样式器

GFM 警告

注意

请小心！

• 查看详情

自定义对齐

我是居中的

我在右对齐

• 查看详情

属性支持

一个有 id 的 单词。

• 查看详情

提示容器

提示

这是一个提示。

• 查看详情

标记

你可以标记 重要的内容 。

• 查看详情

样式化

设置它没有任何效果，请不要这样使用

• 查看详情

图表

该插件提供了 4 种方法让您将图表插入到 Markdown 文件中。

• Chart.js：一个轻量级、易于使用、高度可定制的图表库。

  与 Echarts 相比，Chart.js 更轻量。

• Echarts：一个强大的、交互式的浏览器图表和可视化库。

  与 Chart.js 相比，Echarts 更强大。

• flowchart: Markdown 扩展，用于生成流程图和序列图。

  轻量级，只关注流程图。

• Markmap: 从 Markdown 生成思维导图

  运行环境非常重，不推荐使用。

• Mermaid：以与 Markdown 类似的方式从文本生成图表和流程图。

  常用图表的强大集合。

Chart.js

一个散点图案例

• 查看详情

Echarts

一个折线图案例

• 查看详情

流程图

• 查看详情

Markmap

• 查看详情

Mermaid 图表

• 查看详情

代码

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

• 代码选项卡：为代码块添加选项卡。
• 代码演示：在浏览器中显示和运行代码片段。
• 交互演示：嵌入外部演示站点。
• Kotlin 交互演示：响应式 Kotlin 演示。
• Vue 交互演示：响应式 Vue 演示。

代码选项卡

pnpm

pnpm add -D vuepress-plugin-md-enhance

yarn

yarn add -D vuepress-plugin-md-enhance

npm

npm i -D vuepress-plugin-md-enhance

• 查看详情

代码演示

一个普通 Demo

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

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

span {
  color: red;
}

• 查看详情

交互演示

TS 案例

• 查看详情

Kotlin 交互演示

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 交互演示

Vue 交互演示

• 查看详情

Sandpack 交互演示

Vue 交互演示

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

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

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

Open Sandbox

• 查看详情

---

1. 这是脚注内容 ↩︎