vuepress-theme-plume/md-power.md at f79f7bd03a78a3e8a9e27fa38c2a048946aaff21

gitea-yuany3721/vuepress-theme-plume

Fork 1

mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00

pengzhanbo 69d1b0f2d9 docs: update docs

2024-06-22 00:05:07 +08:00

6.9 KiB

Raw Blame History

title, author, createTime, permalink, tags

title

author

createTime

permalink

指南

插件为 vuepress markdown 注入更多的功能支持。

其中，@[xxx](xx) 形式的语法，主要用于资源嵌入类型的支持，包括嵌入 PDF、视频、代码演示等。

同时，还提供了其它的语法支持。

安装

::: code-tabs @tab npm

npm install vuepress-plugin-md-power

@tab:active yarn

yarn add vuepress-plugin-md-power

@tab pnpm

pnpm add vuepress-plugin-md-power

:::

使用

// .vuepress/config.ts
import { markdownPowerPlugin } from 'vuepress-plugin-md-power'

export default {
  // ...
  plugins: [
    markdownPowerPlugin({
      pdf: true
    })
  ]
  // ...
}

Options

interface MarkdownPowerPluginOptions {
  pdf?: boolean | PDFOptions

  // new syntax
  icons?: boolean | IconsOptions

  // video embed
  bilibili?: boolean
  youtube?: boolean

  // code embed
  codepen?: boolean
  replit?: boolean
  codeSandbox?: boolean
  jsfiddle?: boolean

  caniuse?: boolean | CanIUseOptions
  repl?: false | {
    go?: boolean
    rust?: boolean
    kotlin?: boolean
    theme?: string | { light: string, dark: string }
  }
}

使用

caniuse

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

语法

@[caniuse](feature)
@[caniuse image](feature) // 不再推荐使用
@[caniuse embed{versionRange}](feature)

你可以从 caniuse 获取 feature 的值。

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

caniuse 默认查看最近的5个浏览器版本。你可以通过 {versionRange} 手动设置查看的浏览器版本。格式为 {past,future} 表示 {过去版本,未来版本}。取值范围为 -5 ~ 3 。

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

如 {-2,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。

CodePen

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

语法

@[codepen](user/slash)
@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)

user 为 CodePen 用户名
slash 为 CodePen slash
preview 为是否为预览模式
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 ID
title: Code Sandbox 标题
layout: 代码预览布局可选值： Preview， Editor， Editor+Preview
height: 代码预览高度
navbar: 是否显示导航栏，默认为 true
console: 是否显示控制台，默认为 false
filepath: 文件路径

JSFiddle

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

语法

@[jsfiddle](user/id)
@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)

user: 用户
id: jsfiddle id
theme: 主题模式，可选值： "light" | "dark"
tab: 选项卡，可选值："js" | "css" | "html" | "result", 多个用 "," 分割，顺序将决定选项卡的排序，默认为 js,css,html,result
height: 高度

Repl

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

提供在 markdown 中为 golang 、kotlin、rust 语言的在线代码演示支持。在线编译执行代码，并输出结果。

语法

::: go-repl
```go
// your go lang code
```
:::

::: kotlin-repl
```kotlin
// your kotlin code
```
:::

:::rust-repl
```rust
// your rust code
```
:::

6.9 KiB Raw Blame History Unescape Escape

指南

安装

使用