stei-blog

4.7 KiB

Raw Blame History Unescape Escape

icon	title	category	tag	author	article	timeline
markdown	Markdown 增强	[使用指南]	[markdown]	Mr.Hope	false	false

VuePress 的每个文档页面都是由 Markdown 渲染而成。所以你需要通过在相应路径创建编写 Markdown 建立你的文档或博客页面。

Markdown 介绍

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

::: info Frontmatter

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

:::

VuePress 扩展

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

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

主题扩展

一键启用

你可以设置 themeconfig.plugins.htmlEnhance.enableAll 启用 md-enhance 插件的所有功能。

module.exports = {
  themeConfig: {
    plugins: {
      mdEnhance: {
        enableAll: true,
      },
    },
  },
};

自定义容器

::: v-pre

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

:::

::: info 自定义标题

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

const a = 1;

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

:::: details 代码

::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

::::

查看详情

代码块

:::: code-group

::: code-group-item yarn

yarn add -D vuepress-theme-hope

:::

::: code-group-item npm:active

npm i -D vuepress-theme-hope

:::

::::

查看详情

自定义对齐

::: center

我是居中的

:::

::: right

我在右对齐

:::

查看详情

上下角标

19^th^ H~2~O

查看详情

脚注

此文字有脚注¹.

查看详情

标记

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

查看详情

任务列表

计划 1
计划 2
查看详情

流程图

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 一个普通 Demo

<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("十分帅");
});

span {
  color: red;
}

:::

查看详情

幻灯片

@slidestart

幻灯片 1

一个有文字和链接的段落

幻灯片 2

项目 1
项目 2

幻灯片 3.1

const a = 1;

幻灯片 3.2

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

@slideend

查看详情

这是脚注内容 ↩︎

4.7 KiB Raw Blame History Unescape Escape