项目地址： vuepress-plugin-caniuse

# 指南

为你的 vuepress 站点，在编辑 技术文章时， 提供 嵌入 can-i-use WEB feature 各平台支持说明图标 的功能。

方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。

# 安装

npm install @vuepress-plume/vuepress-plugin-caniuse

yarn add @vuepress-plume/vuepress-plugin-caniuse

pnpm add @vuepress-plume/vuepress-plugin-caniuse

# 使用

# Step1：添加插件

将插件添加到你的 vuepress 项目的配置文件中：

import { defineUserConfig } from 'vuepress'
import { caniusePlugin } from '@vuepress-plume/vuepress-plugin-caniuse'

export default defineUserConfig({
  plugins: [
    caniusePlugin()
  ]
})

const { caniusePlugin } = require('@vuepress-plume/vuepress-plugin-caniuse')

module.exports = {
  plugins: [
    caniusePlugin()
  ]
}

# Step2：在markdown中使用

在你的 文章 markdown文件中，使用以下格式：

::: caniuse <feature>
:::

示例： 获取 css 伪类选择器 :dir() 在各个浏览器的支持情况图标：

::: caniuse css-matches-pseudo
:::

效果：

# Method

caniusePlugin([options])

插件注册函数

options: [CanIUsePluginOptions]

• options.mode: 配置 can-i-use 在 文章中的 嵌入模式, 默认： image
  • image： 嵌入 特性图表图片
  • embed: 嵌入 iframe， 实时的，可交互的模式