@vuepress-denaro/vuepress-plugin-code-preview

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.

Thanks

vuepress-plugin-code-preview