# Markdown 展示 | 文档演示
VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。 你应该创建和编写 Markdown 文件，以便 VuePress 可以根据文件结构将它们转换为不同的页面。 Markdown 介绍 如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。 Mark...

跳至主要內容

- 项目主页

- 案例

  - 布局
  - Markdown 展示
  - 页面配置
  - 布局与功能禁用
  - 密码加密的文章

- 文档

  - 指南
- 幻灯片
  open in new window

# Markdown 展示

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

此页内容

- Markdown 介绍
- Markdown 配置
- Markdown 扩展
- - VuePress 扩展
  - 主题扩展
  - 图片增强

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

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

## Markdown 介绍

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

## Markdown 配置

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

相关信息

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

## Markdown 扩展

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

### VuePress 扩展

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

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

### 主题扩展

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

#### 提示容器

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

自定义标题

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

    const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

- 查看详情
  open in new window

#### 代码块

pnpm

    pnpm add -D vuepress-theme-hope

yarn

    yarn add -D vuepress-theme-hope

npm

    npm i -D vuepress-theme-hope

- 查看详情
  open in new window

#### 上下角标

19th H2O

- 查看详情
  open in new window

#### 自定义对齐

我是居中的

我在右对齐

- 查看详情
  open in new window

#### Attrs

一个拥有 ID 的 单词。

- 查看详情
  open in new window

#### 脚注

此文字有脚注^first.

- 查看详情
  open in new window

#### 标记

你可以标记 重要的内容 。

- 查看详情
  open in new window

#### 任务列表

- [x] 计划 1

- [ ] 计划 2

- 查看详情
  open in new window

### 图片增强

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

- 查看详情
  open in new window

#### 组件

Mr.Hope

Where there is light, there is hope

- 查看详情
  open in new window

#### 导入文件

- 查看详情
  open in new window

#### 样式化

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

- 查看详情
  open in new window

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

- 查看详情
  open in new window

#### 图表

- 查看详情
  open in new window

#### Echarts

- 查看详情
  open in new window

#### 流程图

- 查看详情
  open in new window

#### MarkMap

- 查看详情
  open in new window

#### Mermaid

- 查看详情
  open in new window

#### 代码演示

- 查看详情
  open in new window

#### 交互演示

- 查看详情
  open in new window

#### Kotlin 交互演示

- View Detail
  open in new window

#### Vue 交互演示

- 查看详情
  open in new window

#### Sandpack 交互演示

- 查看详情
  open in new window

#### 幻灯片

- 查看详情
  open in new window