跳至主要內容

Markdown 展示

Mr.Hope大约 3 分钟使用指南Markdown

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;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

代码块

npm
npm i -D vuepress-theme-hope

上下角标

19th H2O

自定义对齐

我是居中的

我在右对齐

Attrs

一个拥有 ID 的 单词

脚注

此文字有脚注^first.

标记

你可以标记 重要的内容

任务列表

图片增强

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

组件

title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
color: rgba(253, 230, 138, 0.15)

导入文件

代码演示

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

样式化

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

交互演示

TS 案例

图表

::: 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

---
title: Flowchart
---
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} $$

Vue 交互演示

::: vue-playground Vue 交互演示