yuany3721/vuepress-theme-plume

Fork 0

forked from gitea-yuany3721/vuepress-theme-plume

pengzhanbo 9a441c0941 docs: update doc

2024-03-30 00:48:28 +08:00

3.8 KiB

Raw Blame History

vuepress-plugin-md-power

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

功能

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

安装

pnpm add vuepress-plugin-md-power

使用

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

语法

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

你可以从 caniuse 获取 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

语法

@[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 依赖。

pnpm add @iconify/json

语法

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

你可以从 icon-sets.iconify 获取图标集。

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

:[logos:vue]:

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

:[logos:vue 1.2em]:

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

:[logos:vue /blue]:

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

:[logos:vue 1.2em/blue]:

bilibili

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

语法

@[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

语法

@[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。

3.8 KiB Raw Blame History Unescape Escape