跳至主要內容

Markdown

大约 4 分钟快速上手快速上手Markdown

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

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

Markdown 介绍

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

Markdown 配置

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

相关信息

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

Markdown 扩展

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

VuePress 扩展

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

关于这些扩展,请阅读 内置 Markdown 扩展

主题扩展

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

自定义容器

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

自定义标题

信息容器,包含 代码链接

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码
::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

选项卡

Apple

代码块

npm i -D vuepress-theme-hope

自定义对齐

我是居中的

我是右对齐

属性支持

一个有 id 的 单词

上下角标

19th H2O

脚注

此文字有脚注[1].

标记

你可以标记 重要的内容

任务列表

图片增强

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

卡片

Mr.Hope

Where there is light, there is hope

图表

一个散点图案例

Echarts

一个折线图案例

流程图

Mermaid

Tex 语法

rωr(yωω)=(yωω){(logy)r+i=1r(1)ir(ri+1)(logy)riωi}

导入文件

提示

你最近怎么样了? 😄

代码演示

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

样式化

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

交互演示

TS 案例

Vue 交互演示

Vue 交互演示

幻灯片


  1. 这是脚注内容 ↩︎