https://github.com/waycowei/vuepress-plugin-demo-container-v2

Vuepress plugin for demo block
https://github.com/waycowei/vuepress-plugin-demo-container-v2

container demo documentation documentation-tool vuejs2 vuepress vuepress-plugin

Last synced: 4 days ago
JSON representation

Vuepress plugin for demo block

• Host: GitHub
• URL: https://github.com/waycowei/vuepress-plugin-demo-container-v2
• Owner: waycowei
• License: mit
• Created: 2021-05-31T13:15:01.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T02:44:10.000Z (over 1 year ago)
• Last Synced: 2024-11-09T22:28:18.631Z (7 days ago)
• Topics: container, demo, documentation, documentation-tool, vuejs2, vuepress, vuepress-plugin
• Language: Vue
• Homepage: https://waycowei.github.io/vuepress-plugin-demo-container-v2/
• Size: 5.1 MB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Introduction

[中文 README](https://github.com/waycowei/vuepress-plugin-demo-container-v2/blob/master/README.zh-CN.md)

`Demo Container V2` is a `Vuepress-based` plug-in, which can help you add `Vue` examples when writing documents.

It can help you:

1. Write an example to automatically generate component examples and code examples by the custom `::: demo` syntax;

2. Support the `import` syntax in code example;

# Install

Use `yarn`:

```bash

yarn add vuepress-plugin-demo-container-v2 -D

```

Or `npm`:

```bash

npm i vuepress-plugin-demo-container-v2 -D

```

# Usage

Open the `.vuepress/config.js` file, and then reference the plugin in the appropriate location:

```js

module.exports = {

  plugins: ['demo-container-v2']

}

```

Write the following code in the Markdown file:

```html

::: demo

```vue

  


    
{{ message }}

    

  


  import { ref } from 'vue-demi'

  export default {

    setup () {

      const message = ref('Hello Here')

      return {

        message

      }

    }

  }

` ``

:::

```

[View full documentation](https://waycowei.github.io/vuepress-plugin-demo-container-v2/zh/)

# Thanks

This project is heavily inspired by the [md-loader](https://github.com/element-plus/element-plus/tree/dev/website/md-loader) of ElemeFE team.

# Contributors



  

    

  

  

    

  



# License

[MIT License](https://github.com/waycowei/vuepress-plugin-demo-container-v2/blob/master/LICENSE) @2020-PRESENT [Wayco Wei](https://github.com/waycowei)