Markdown 展示

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

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

Markdown 介绍

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

Markdown 配置

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

Frontmatter

Frontmatter 是 VuePress 中很重要的一个概念，请阅读 Frontmatter 介绍 了解详情。

Markdown 扩展

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

VuePress 扩展

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

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

主题扩展

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

选项卡

apple

Apple

banana

Banana

orange

Orange

• 查看详情

脚注

此文字有脚注^first.

• 查看详情

导入文件

• 查看详情

幻灯片

@slidestart

幻灯片 1

一个有文字和 链接 的段落

---

幻灯片 2

• 项目 1
• 项目 2

---

幻灯片 3.1

const a = 1;

--

幻灯片 3.2

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

@slideend

• 查看详情

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

• 查看详情

任务列表

• 计划 1
• 计划 2

查看详情

图片增强

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

• 查看详情

上下角标

19^th H₂O

• 查看详情

组件

Mr.Hope

---

Where there is light, there is hope

• 查看详情

提示容器

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

自定义标题

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

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

• GitHub 警示
• 提示框

自定义对齐

我是居中的

我在右对齐

• 查看详情

属性支持

一个拥有 ID 的 单词。

• 查看详情

标记

你可以标记 重要的内容 。

• 查看详情

剧透

VuePress Theme Hope 十分强大.

• 查看详情

样式化

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

• 查看详情

图表

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

• 查看详情

MarkMap

---
markmap:
  colorFreezeLevel: 2
---

# markmap

## 链接

- <https://markmap.js.org/>
- [GitHub](https://github.com/markmap/markmap)

## 功能

- 链接
- **强调** ~~删除线~~ *斜体* ==高亮==
- 多行
  文字
- `行内代码`
-
    ```js
    console.log('code block');
    ```
- Katex
  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- 现在我们可以通过 `maxWidth` 选项自动换行非常非常非常非常非常非常非常非常非常非常长的内容

• 查看详情

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

• 查看详情

PlantUML

@startuml Alice -> Bob: 认证请求

alt 成功情况

Bob -> Alice: 认证接受

else 某种失败情况

Bob -> Alice: 认证失败
group 我自己的标签
Alice -> Log : 开始记录攻击日志
    loop 1000次
        Alice -> Bob: DNS 攻击
    end
Alice -> Log : 结束记录攻击日志
end

else 另一种失败

Bob -> Alice: 请重复

end @enduml

• View Detail

代码块

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

• 查看详情

代码演示

一个普通 Demo

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

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

span {
  color: red;
}

• 查看详情

交互演示

::: playground#unocss UnoCSS 示例

@file index.html

<div class="flex flex-col text-center h-full justify-center">
  <div class="text-red">TEST for default preset</div>
  <div class="text-$fd-color">TEST for custom css</div>
</div>

@file config.js

import { defineConfig, presetUno } from "unocss";

export default defineConfig({
  presets: [presetUno()],
});

@file custom.css

:root {
  --fd-color: green;
}

:::

• 查看详情

Kotlin 交互演示

::: kotlin-playground Simple Playground

@file main.kt

class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)
}

:::

• 查看详情

Sandpack 交互演示

::: sandpack#vue Vue 示例

@file /src/App.vue

<script setup>
import { ref } from "vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

:::

• 查看详情

Vue 交互演示

::: vue-playground Vue 交互演示

@file App.vue

<script setup>
import { ref } from "vue";

const msg = ref("Hello World!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

:::

• 查看详情