https://github.com/foolishchow/vitepress-live-demo

view demo in vitepress
https://github.com/foolishchow/vitepress-live-demo

Last synced: 5 days ago
JSON representation

view demo in vitepress

• Host: GitHub
• URL: https://github.com/foolishchow/vitepress-live-demo
• Owner: foolishchow
• Created: 2022-05-19T14:18:35.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T07:58:22.000Z (over 2 years ago)
• Last Synced: 2024-11-05T05:40:00.642Z (9 days ago)
• Language: TypeScript
• Size: 49.8 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vitepress-live-demo



    

        

     

    

        

    



> view demo in vitepress

>  - support iframe 

>  - support isolate demo view in `~/demo.html`

inspried by 

- [dumi](https://d.umijs.org/zh-CN)

- [create-vitepress-demo](https://github.com/bowencool/create-vitepress-demo)

# demo

[vform-element](https://foolishchow.gitee.io/vform-element/)   

or see [`example`](./example/)

# install 

```

npm i vitepress-live-demo

```

# Config

## config `.vitepress/config.ts`

```typescript

import { MarkdownItLiveDemo, VitePluginLiveDemo } from 'vitepress-live-demo'

import { UserConfig } from 'vitepress';

import type { DefaultTheme } from 'vitepress/types/default-theme'

export const config: UserConfig = {

  // https://vitepress.vuejs.org/guide/markdown.html#advanced-configuration

  markdown: {

    config: (md) => {

      md.use(MarkdownItLiveDemo)

    },

  },

  vite: {

    plugins: [

      VitePluginLiveDemo({ lineNumber: true })

    ]

  }

};

export default config

```

## config `.vitepress/theme/index.js`

```typescript

import { VitepressLiveDemo } from 'vitepress-live-demo/lib/theme'

import DefaultTheme from "vitepress/dist/client/theme-default";

import type { Theme } from 'vitepress/dist/client'

import "vitepress-live-demo/lib/style.css"

export default {

  ...DefaultTheme, // or ...VitepressLiveDemo

  enhanceApp(ctx){

    VitepressLiveDemo.enhanceApp(ctx)

  }

} as Theme

```

## custom DemoComponent 

```typescript

import { LiveDemoComponentName , LiveDemoComponenentProps} from 'vitepress-live-demo/lib/theme'

import DefaultTheme from "vitepress/dist/client/theme-default";

import type { Theme } from 'vitepress/dist/client'

import { defineComponent } from 'vue'

// write your component

const YourComponent = defineComponent({

  // this is the props 

  props:LiveDemoComponenentProps,

  setUp(props,context){

  }

})

export default {

  ...DefaultTheme, 

  enhanceApp(ctx){

    // VitepressLiveDemo.enhanceApp(ctx)   remove this

    // add this

    ctx.app.component(LiveDemoComponentName, YourComponent)

  }

} as Theme

```

## link `demo` 

- common mode

```markdown

```

- iframe mode

```markdown

```