Markdown 增强

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

# Markdown 介绍

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

# VuePress 扩展

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

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

# 主题扩展

# 一键启用

你可以设置 themeconfig.plugins.mdExtention.enableAll 启用 md-extentionopen in new window 插件的所有功能。

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

# 自定义容器

::: v-pre

安全的在 Markdown 中使用 。

:::

const a = 1;

::: v-pre

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

:::

::: info 自定义标题

信息容器

:::

::: tip 自定义标题

提示容器

:::

::: warning 自定义标题

警告容器

:::

::: danger 自定义标题

危险容器

:::

::: details 自定义标题

详情容器

:::

• 查看详情

# 代码块

:::: code-group

::: code-group-item yarn

yarn add -D @mr-huang/vuepress-theme-weasel

:::

::: code-group-item npm:active

npm i -D @mr-huang/vuepress-theme-weasel

:::

::::

• 查看详情

# 自定义对齐

::: center

我是居中的

:::

::: right

我在右对齐

:::

• 查看详情

# 标记

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

• 查看详情

# 任务列表

• [x] 计划 1

• [ ] 计划 2

• 查看详情

# 代码演示

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

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

span {
  color: red;
}

• 查看详情

# 幻灯片

@slidestart

# 幻灯片 1

一个有文字和 链接open in new window 的段落

# 幻灯片 2

• 项目 1
• 项目 2

# 幻灯片 3.1

const a = 1;

--

# 幻灯片 3.2

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

@slideend

• 查看详情