Markdown 展示

五十岚2022年9月16日
大约 4 分钟

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

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

Markdown 介绍

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

Markdown 配置

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

相关信息

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

Markdown 扩展

VuePress 会使用 markdown-itopen in new window 来解析 Markdown 内容,因此可以借助于 markdown-it 插件来实现 语法扩展open in new window

VuePress 扩展

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

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

主题扩展

通过 vuepress-plugin-md-enhanceopen in new window,主题扩展了更多 Markdown 语法,提供更加丰富的写作功能。

自定义容器

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

自定义标题

信息容器,包含 代码链接

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码
::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

代码块

上下角标

19^th^ H~2~O

自定义对齐

我是居中的

我在右对齐

Attrs

一个拥有 ID 的 单次

脚注

此文字有脚注[1].

标记

你可以标记 重要的内容

任务列表

图片增强

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

图表

一个散点图案例

Echarts

一个折线图案例

流程图

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;
}

样式化

向 Mr.Hope 捐赠一杯咖啡。 Recommanded

交互演示

TS 案例

Vue 交互演示

Vue 交互演示

幻灯片


  1. 这是脚注内容 ↩︎

上次编辑于: 2022/9/16 05:39:37