约 1666 字大约 6 分钟

2022-04-09

markdown 增强 由 vuepress-plugin-md-enhance 提供支持。

内容容器

支持多种内容容器,更好的表达文章内容。

  1. tip 提示
  2. note 注释
  3. info 信息
  4. warning 警告
  5. caution 危险
  6. details 详情
  • 提示

    ::: tip 提示
    提示内容
    :::

    提示

    提示内容

  • 注释

    ::: note 注释
    注释内容
    :::

    注释

    注释内容

  • 信息

    ::: info 信息
    信息内容
    :::

    信息

    信息内容

  • 警告

    ::: warning 警告
    警告内容
    :::

    警告

    警告内容

  • 危险

    ::: caution 警告
    危险内容
    :::

    警告

    危险内容

  • 重要

    ::: important 重要
    重要内容
    :::

    重要

    重要内容

  • 详情

    ::: details 详情
    详情信息
    :::
    详情

    详情信息

GFM alerts

提供 github flavored markdown 的 alerts 支持。

> [!note]
> This is a note

This is a note

> [!info]
> This is a info

相关信息

This is a info

> [!warning]
> This is a warning

注意

This is a warning

> [!caution]
> This is a caution

警告

This is a caution

> [!tip]
> This is a tip

提示

This is a tip

> [!important]
> This is a important

重要

This is a important

自定义对齐

  • 左对齐
    ::: left
    这是左对齐
    :::

    这是左对齐

  • 右对齐
    ::: right
    这是右对齐
    :::

    这是右对齐

  • 居中
    ::: center
    这是居中对齐
    :::

    这是居中对齐

任务列表

- [ ] todo1
- [x] todo2

标记

将这个内容进行 ==标记== ,变成高亮。

将这个内容进行 标记 ,变成高亮。

上下角标

- 上角标: 19^th^
- 下角标: H~2~O
  • 上角标: 19th
  • 下角标: H2O

数学表达式

数学表达式: $-(2^{n-1})$ ~ $2^{n-1} -1$

数学表达式: (2n1)-(2^{n-1}) ~ 2n112^{n-1} -1

内容分组

::: tabs
@tab 分组选项卡1
分组选项卡内容 1

**任意的 Markdown 语法**

@tab 分组选项卡2
分组选项卡内容 2
:::
分组选项卡1

分组选项卡内容 1

任意的 Markdown 语法

代码块分组

你需要在 外围使用code-group 容器,内部使用code-group-item 将代码块进行包裹。

需要给 code-group-item 容器设置标题

如果需要给先让某个选项卡被激活,在标题后面补充:active后缀。

::: code-tabs

@tab yarn
```sh
yarn version
```


@tab:active npm
```sh
npm version
```
:::
npm
npm version

代码演示

::: [类型]-demo 可选的标题文字

```html
<!-- ↑ 使用可用的语言 -->
<!-- 在代码块中放置你对应语言的代码,一个语言不能出现多个块 -->
<!-- 你可以有多个代码块,并且 html, js, css 都是视情况可选的 -->
```

```json
// json block 作为插件配置存放处
{
  // 放置你的配置 (可选的)
}
```

:::

提示

JSON 块是可选的,可用的配置详见配置

插件支持三种类型

  • normal(默认)
  • vue
  • react

可用的语言

你可以在演示块中使用不同语言。

当你设置一些不能在浏览器上直接运行的语言时,由于插件无法解析它们,因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。

可用的 HTML 语言:

  • "html" (默认)
  • "slim"
  • "haml"
  • "markdown"

可用的 JS 语言:

  • "javascript" (default)
  • "coffeescript"
  • "babel"
  • "livescript"
  • "typescript"

你也可以在代码块中使用 js, ts, coffeels。

可用的 CSS 语言:

  • "css" (default)
  • "less"
  • "scss"
  • "sass"
  • "stylus"

不支持的语言

一个使用浏览器不支持解析语言 Demo
# 标题

十分强大
const message: string = "VuePress Theme Hope";

document.querySelector("h1").innerHTML = message;
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
代码
::: normal-demo 一个使用浏览器不支持解析语言 Demo

```md
# 标题

十分强大
```

```ts
const message: string = "VuePress Theme Hope";

document.querySelector("h1").innerHTML = message;
```

```scss
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
```

:::

普通代码演示

格式:

::: normal-demo 可选的标题文字

```html
<!-- html code -->
```

```js
// js code
```

```css
/* css code */
```

```json
// 配置 (可选)
{
  "jsLib": [
    ...
  ],
  "cssLib":[
    ...
  ]
}
```

:::

注意事项

我们使用 "ShadowDOM" 进行样式隔离,并已经将 document 替换为了 shadowRoot 对象。如果需要访问页面的 document,请访问 window.document

例子

Demo 演示
<h1>Hello Word!</h1>
<p><span id="very">非常</span>强大!</p>
document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});
span {
  color: red;
}
代码
::: normal-demo Demo 演示

```html
<h1>Hello Word!</h1>
<p><span id="very">非常</span>强大!</p>
```

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

```css
span {
  color: red;
}
```

:::

Vue 代码演示

格式

::: vue-demo 可选的标题文字

```vue
<!-- ↑ 你也可以使用 html -->
<template>
  <!-- vue 模板 -->
</template>
<script>
export default {
  // vue 组件
};
</script>
<style>
/* css 代码 */
</style>
```

```json
// 配置 (可选)
```

:::

注意事项

  • 你只能使用 Vue3
  • 必须将组件通过 export default 默认导出
  • 我们使用 "ShadowDOM" 进行样式隔离,并已经将 document 替换为了 shadowRoot 对象。如果需要访问页面的 document,请访问 window.document

演示

一个 Vue Composition 演示
<template>
  <div class="box">
    <code>Hello Word</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
const { ref } = Vue;

export default {
  setup() {
    const message = ref("powerful");

    const handler = () => {
      message.value = "very " + message.value;
    };

    return {
      message,
      handler,
    };
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>
代码
::: vue-demo 一个 Vue Composition 演示

```vue
<template>
  <div class="box">
    <code>Hello Word</code> is
    <span @click="handler">{{ message }}</span
    >!
  </div>
</template>
<script>
const { ref } = Vue;

export default {
  setup() {
    const message = ref("powerful");

    const handler = () => {
      message.value = "very " + message.value;
    };

    return {
      message,
      handler,
    };
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>
```

:::

React 代码演示

格式

::: react-demo 可选的标题文字

```js
// 放置脚本,并通过 `export default` 导出你的 react 组件
```

```css
/* 你的 css 内容 */
```

```json
// 配置 (可选)
```

:::

注意事项

  • 使用 React 的时候,为了解析 JSX 必须引入 Babel,此过程由插件自动完成。
  • 必须将组件通过 export default 默认导出
  • 我们使用 "ShadowDOM" 进行样式隔离,并已经将 document 替换为了 shadowRoot 对象。如果需要访问页面的 document,请访问 window.document

演示

一个函数式 React Demo
const { useState } = React;

export default () => {
  const [message, setMessage] = useState(" 强大");

  const handler = () => {
    setMessage(`十分${message}`);
  };

  return (
    <div className="box">
      <code>Hello Word !</code>
      <span id="powerful" onClick={handler}>
        {message}
      </span>
    </div>
  );
};
.box #powerful {
  color: blue;
}
代码
::: react-demo 一个函数式 React Demo

```js
const { useState } = React;

export default () => {
  const [message, setMessage] = useState(" 强大");

  const handler = () => {
    setMessage(`十分${message}`);
  };

  return (
    <div className="box">
      <code>Hello Word !</code>
      <span id="powerful" onClick={handler}>
        {message}
      </span>
    </div>
  );
};
```

```css
.box #powerful {
  color: blue;
}
```

:::

脚注

人生自古谁无死,留取丹心照汗青[^脚注1]

[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**

人生自古谁无死,留取丹心照汗青[1]

其他支持

更多支持请参考 主题插件配置


  1. 出自 宋·文天祥 《过零丁洋》 ↩︎