vuepress-plugin-code-preview
🎉 A vuepress plugin for codesandbox embed code preview.一个用于 codesandbox 嵌入代码预览的 vuepress 插件.
Usage
- Install
# npm
npm install @vuepress-denaro/vuepress-plugin-code-preview
# yarn
yarn add @vuepress-denaro/vuepress-plugin-code-preview
- Update
plugins
in.vuepress/config.js
or.vuepress/config.ts
js
const {
codePreviewPlugin,
} = require('@vuepress-denaro/vuepress-plugin-code-preview')
module.exports = {
plugins: [codePreviewPlugin()],
}
ts
import { codePreviewPlugin } from '@vuepress-denaro/vuepress-plugin-code-preview'
import { defineUserConfig } from '@vuepress/cli'
export default defineUserConfig({
plugins: [codePreviewPlugin()],
})
- Write markdown
codesandbox
<DenraoCodePreview embedUrl="https://codesandbox.io/embed/avue-demo-z4uje?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&view=preview" />
width
-
type:
string
-
default:
'100%'
The width of the container.
height
-
type:
string
-
default:
'650px'
The height of the container.
embedUrl
-
type:
string
-
default:
''
Online code preview url.
embedBox
-
type:
string
-
default:
'codesandbox'
Types of embed code previews.