docute-demo-code

🔥Live code block for Docute

Please consider starring the project to show your ❤️ and support.

Only support Vue SFC string!
For others you might want to try docute-run-code

🤗Checkout the live demo

Usage

First load this plugin via <script> tag:

<!-- Load this plugin after docute.js -->
<script src="https://cdn.jsdelivr.net/npm/docute-demo-code"></script>

This plugin exposed as window.docuteDemoCode

new Docute({
  ...
  plugins: [
    docuteDemoCode()
  ]
})

Then, you can write a demo code block with live demo in .md file:
(Don't forget to specify the code language to html or vue)

# Introduction

> Showcase for demo code

:::demo
```html
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hi, 😋'
    }
  }
}
</script>
```
:::

Similar to vuepress custom container huh?

Use With Bundlers

yarn add docute-demo-code --dev

Webpack

In your entry file:

import Docute from 'docute'
import docuteDemoCode from 'docute-demo-code'

new Docute({
  ...
  plugins: [
    docuteDemoCode()
  ]
})

API

docuteDemoCode(options: Options)

showBorder

• Type: boolean
• Default: true

Use docute style to wrap living demo block

Relate

• docute-custom-container

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

docute-demo-code © evillt, Released under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

evila.me · GitHub @evillt · Twitter @evillt