Markdown 展示

VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。

你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。

Markdown 介绍

如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。

Markdown 配置

VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。

相关信息

Frontmatter 是 VuePress 中很重要的一个概念，如果你不了解它，你需要阅读 Frontmatter 介绍。

Markdown 扩展

VuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展 。

VuePress 扩展

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

关于这些扩展，请阅读 VuePress 中的 Markdown 扩展。

主题扩展

通过 vuepress-plugin-md-enhance，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。

一键启用

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

自定义容器

::: v-pre

安全的在 Markdown 中使用 。

:::

自定义标题

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

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码

::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

• 查看详情

代码块

• 查看详情

自定义对齐

我是居中的

我在右对齐

• 查看详情

上下角标

19^th^ H~2~O

• 查看详情

脚注

此文字有脚注^first.

• 查看详情

标记

你可以标记 ==重要的内容== 。

• 查看详情

任务列表

• [x] 计划 1

• [ ] 计划 2

• 查看详情

图片增强

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

• 查看详情

图表

一个散点图案例

• 查看详情

Echarts

::: echarts 一个折线图案例

{
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [150, 230, 224, 218, 135, 147, 260],
      "type": "line"
    }
  ]
}

:::

• 查看详情

流程图

cond=>condition: 是否执行操作?
process=>operation: 操作
e=>end: 结束

cond(yes)->process->e
cond(no)->e

• 查看详情

Mermaid

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

• 查看详情

Tex 语法

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

• 查看详情

导入文件

目录

• Markdown 展示

• 页面展示

• 查看详情

代码演示

一个普通 Demo

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

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

span {
  color: red;
}

• 查看详情

样式化

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

• 查看详情

幻灯片

• 查看详情