Markdown 增强

h7ml
  • 使用指南
  • Markdown
大约 3 分钟

VuePress 的每个文档页面都是由 Markdown 渲染而成。所以你需要通过在相应路径创建编写 Markdown 建立你的文档或博客页面。

Markdown 介绍

如果你是一个新手,还不会编写 Markdown,请先阅读 Markdown 介绍open in new windowMarkdown 演示open in new window

Frontmatter

Frontmatter 是 VuePress 中很重要的一个概念,如果你不了解它,你需要阅读 Frontmatter 介绍open in new window

VuePress 扩展

为了丰富文档写作,VuePress 对 Markdown 语法进行了扩展。

关于这些扩展,请阅读 VuePress 中的 Markdown 扩展open in new window

主题扩展

一键启用

你可以设置在主题选项中设置 plugins.mdEnhance.enableAll: true 启用 md-enhanceopen in new window 插件的所有功能。

const { hopeTheme } = require('vuepress-theme-hope')

module.exports = {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        enableAll: true,
      },
    },
  }),
}

自定义容器

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

自定义标题

信息容器,包含 代码链接

const a = 1

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码
::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

代码块

自定义对齐

我是居中的

我在右对齐

上下角标

19th H2O

脚注

此文字有脚注[1].

标记

你可以标记 重要的内容

任务列表

图表

一个散点图案例

流程图

Mermaid

Tex 语法

rωr(yωω)=(yωω){(logy)r+i=1r(1)ir(ri+1)(logy)riωi} \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\}

代码演示

一个普通 Demo
<h1>VuePress Theme Hope</h1>
<p>
  <span id="very">非常</span>
  强大!
</p>
document.querySelector('#very').addEventListener('click', () => {
  alert('非常强大')
})
span {
  color: red;
}

幻灯片


  1. 这是脚注内容 ↩︎