@vuepress-denaro/vuepress-plugin-code-preview
v1.3.1
Published
A vuepress plugin for codesandbox embed code preview.一个用于 codesandbox 嵌入代码预览的vuepress插件.
Downloads
29
Maintainers
Readme
vuepress-plugin-code-preview
:tada: 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.