# vuepress-plugin-md-power

为 vuepress 提供 丰富的 markdown 语法支持。

## 功能

- caniuse 支持，提供前端各种特性在各个浏览器版本中的支持情况查看器
- 嵌入 PDF 支持
- 嵌入 视频支持，当前支持嵌入 bilibili 和 youtube 的视频
- 内联 iconify 图标支持

## 安装

```sh
pnpm add vuepress-plugin-md-power
```

## 使用

```ts
import { defineUserConfig } from 'vuepress'
import { md } from 'vuepress-plugin-md-power'

export default defineUserConfig({
  plugins: [
    markdownPowerPlugin({
      caniuse: true,
      pdf: true,
      bilibili: true,
      youtube: true,
      icons: true,
    })
  ]
})
```

### caniuse

插件默认不启用该功能，你需要手动设置 `caniuse` 为 `true`

#### 语法

```md
@[caniuse](feature)
@[caniuse image](feature)
@[caniuse embed{versions}](feature)
```

你可以从 [caniuse](https://caniuse.bitsofco.de/) 获取 feature 的值。

默认情况下，插件通过 `iframe` 嵌入 `caniuse` 的支持情况查看器。
你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。

caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versions}` 手动设置查看的浏览器版本。
格式为 `{number,number,...}`。取值范围为 `-5 ~ 3` 。

- 小于0 表示低于当前浏览器版本的支持情况
- 0 表示当前浏览器版本的支持情况
- 大于0 表示高于当前浏览器版本的支持情况

如 `{-2,-1,1,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。

### pdf

插件默认不启用该功能，你需要手动设置 `pdf` 为 `true`

#### 语法

```md
@[pdf](url)
@[pdf 1](url)
@[pdf 1 no-toolbar width="100%" height="600px" zoom="1" ratio="16:9"](url)
```

`url` 只支持绝对路径以及完整的资源链接地址，请勿传入相对路径。

你可以在 `pdf` 后紧跟空格，设置一个数字表示默认显示的  pdf 页码

- `no-toolbar` 表示不显示工具栏
- `width` 设置宽度
- `height` 设置高度
- `zoom` 设置缩放
- `ratio` 设置宽高比， 仅当 `width` 有值， `height` 未设置时有效

### icons

插件默认不启用该功能，你需要手动设置 `icons` 为 `true`。

你还需要手动安装 `@iconify/json` 依赖。

```sh
pnpm add @iconify/json
```

#### 语法

```md
:[collect:icon]:
:[collect:icon size]:
:[collect:icon /color]:
:[collect:icon size/color]:
```

你可以从 [icon-sets.iconify](https://icon-sets.iconify.design/) 获取 图标集。

显示 `logos` 图标集合下的 `vue` 图标

```md
:[logos:vue]:
```

图标默认大小为 `1em` ，你可以通过 `size` 设置图标大小

```md
:[logos:vue 1.2em]:
```

图标默认颜色为 `currentColor` 你可以通过 `/color` 设置图标颜色

```md
:[logos:vue /blue]:
```

也可以通过 `size/color` 设置图标大小和颜色

```md
:[logos:vue 1.2em/blue]:
```

### bilibili

插件默认不启用该功能，你需要手动设置 `bilibili` 为 `true`

#### 语法

```md
@[bilibili](bvid)
@[bilibili autoplay time="0"](bvid)
@[bilibili p1 autoplay time="0" ratio="16:9"](aid cid)
```

- 设置 `autoplay` 以自动播放视频。
- 设置 `time` 以指定开始播放的时间点，单位为秒。还可以传入 `mm:ss` 或者 `hh:mm:ss`。
- 如果为 分p（非合集），还可以设置 `p\d` （第\d 个分p），此时可以只传入 `aid` 和 `cid`。
- 设置 `ratio` 以指定视频的宽高比。

### youtube

插件默认不启用该功能，你需要手动设置 `youtube` 为 `true`

#### 语法

```md
@[youtube](id)
@[youtube autoplay loop ratio="16:9" star="0" end="0"](id)
```

- `id` 为 YouTube 视频 ID
- `autoplay` 为是否自动播放
- `loop` 为是否循环播放
- `ratio` 为视频的宽高比
- `star` 为开始时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
- `end` 为结束时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。