跳至主要內容

Markdown 展示

gavin-james使用指南Markdown大约 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 语法,提供更加丰富的写作功能。

一键启用

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

TS
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        enableAll: true,
      },
    },
  }),
};

自定义容器

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

自定义标题

信息容器,包含 代码链接

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码
::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

代码块

npm
npm i -D vuepress-theme-hope

自定义对齐

我是居中的

我在右对齐

上下角标

19th H2O

脚注

此文字有脚注[1].

标记

你可以标记 重要的内容

任务列表

图片增强

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

图表

::: chart 一个散点图案例

{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "散点数据集",
        "data": [
          { "x": -10, "y": 0 },
          { "x": 0, "y": 10 },
          { "x": 10, "y": 5 },
          { "x": 0.5, "y": 5.5 }
        ],
        "backgroundColor": "rgb(255, 99, 132)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "type": "linear",
        "position": "bottom"
      }
    }
  }
}

:::

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

导入文件

代码演示

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

样式化

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

幻灯片

@slidestart

幻灯片 1

一个有文字和 链接open in new window 的段落


幻灯片 2

  • 项目 1
  • 项目 2

幻灯片 3.1

const a = 1;

--

幻灯片 3.2

$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$

@slideend


  1. 这是脚注内容 ↩︎