vuepress-plugin-md-power v1.0.0-rc.114
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
为 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 视频 IDautoplay
为是否自动播放loop
为是否循环播放ratio
为视频的宽高比star
为开始时间,单位为秒,还可以传入mm:ss
或者hh:mm:ss
。end
为结束时间,单位为秒,还可以传入mm:ss
或者hh:mm:ss
。
CodePen
插件默认不启用该功能,你需要手动设置 codepen
为 true
语法
@[codepen](user/slash)
@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
user
为 CodePen 用户名slash
为 CodePen slashpreview
为是否为预览模式editable
为是否为可编辑模式title
为标题height
为高度tab
为选项卡,默认为result
, 多个以逗号分隔,如css,result
theme
为主题, 可选值包括dark
和light
Replit
插件默认不启用该功能,你需要手动设置 replit
为 true
语法
@[replit](user/repl-name)
@[replit title="" height="450px" theme="dark"](user/repl-name#filepath)
user
为 Replit 用户名repl-name
为 Replit Repl 名filepath
为文件路径title
为标题height
为高度theme
为主题, 可选值包括dark
和light
CodeSandbox
插件默认不启用该功能,你需要手动设置 codesandbox
为 true
语法
@[codesandbox](id)
@[codesandbox button](workspace/id)
@[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console](id#filepath)
id
: Code Sandbox IDtitle
: Code Sandbox 标题layout
: 代码预览布局 可选值:Preview
,Editor
,Editor+Preview
height
: 代码预览高度navbar
: 是否显示导航栏,默认为 trueconsole
: 是否显示控制台,默认为 falsefilepath
: 文件路径
JSFiddle
插件默认不启用该功能,你需要手动设置 jsfiddle
为 true
语法
@[jsfiddle](user/id)
@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)
user
: 用户id
: jsfiddle idtheme
: 主题模式, 可选值:"light" | "dark"
tab
: 选项卡, 可选值:"js" | "css" | "html" | "result"
, 多个用","
分割, 顺序将决定选项卡的排序,默认为js,css,html,result
height
: 高度
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago