blog/src/demo/markdown.md
2025-05-07 17:52:05 +08:00

7.4 KiB
Raw Blame History

title icon order category tag
Markdown 展示 fa6-brands:markdown 2
使用指南
Markdown

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

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

Markdown 介绍

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

Markdown 配置

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

::: important Frontmatter

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

:::

Markdown 扩展

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

VuePress 扩展

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

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

主题扩展

通过 VuePress 插件,主题扩展了更多 Markdown 语法,提供更加丰富的写作功能。

选项卡

::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

脚注

此文字有脚注1.

导入文件

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~2~O

组件

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

提示容器

::: v-pre

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

:::

::: info 自定义标题

信息容器,包含 代码链接

const a = 1;

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: caution 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

自定义对齐

::: center

我是居中的

:::

::: right

我在右对齐

:::

属性支持

一个拥有 ID 的 单词{#word}。

标记

你可以标记 ==重要的内容== 。

剧透

VuePress Theme Hope !!十分强大!!.

样式化

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

图表