Skip to content

在 VitePress 中,通过集成 markdown-it-video 插件,可以方便地解析 Markdown 中的 YouTube 视频链接,实现视频的嵌入和播放。下面将介绍如何在 VitePress 中使用该插件来解析 YouTube 视频。

安装插件

typescript
npm i @vrcd-community/markdown-it-video

注册插件

在 config.mts 配置文件中,引入插件

typescript
import markdownItVideo from "@vrcd-community/markdown-it-video";

配置该插件解析 markdown

typescript
markdown: {
    config: (md) => {
        md.use(markdownItVideo, {
            youtube: {width: '100%', height: '387px'},
            bilibili: {width: '100%', height: '387px'}
        });
    },
},

具体使用

在 Markdown 中使用以下格式插入视频即可,当前支持 YouTube、Vimeo、Vine、Prezi、OSF、BiliBili 等视频插入。

text
// M:上述视频网站,N 是视频 ID
@[M](N)

如果是本地的音视频,可以使用以下格式插入即可。

text
@[video](/demo.mp4)

示例

text
@[bilibili](BV1Zz421C7xy)

text
@[youtube](LUDYggPshA0)

Released under the MIT License.