docute-custom-container

🔍Docute plugin vuepress custom container

This is just an IT-JUST-WORKS plugin!
CAN NOT be NESTED!

Checkout the live demo

Usage

Load javascript and css

<link
  rel="stylesheet"
  href="https://unpkg.com/docute-custom-container/dist/index.min.css"
/>

<script src="https://unpkg.com/docute@4"></script>
<script src="https://unpkg.com/docute-custom-container"></script>
<script>
  new Docute({
    ...
    plugins: [
      docuteCustomContainer()
    ]
  })
</script>

In your markdown file

# Docute custom container

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

Use With Bundlers

yarn add docute-custom-container

Webpack

In your entry file

import Docute from 'docute'
import customContainer from 'docute-custom-container'

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

API

docuteCustomContainer(options: Options)

defaultTitle

• Type: boolean
• Default: false

Show the default title when you unspecified customize title.

registerContainer

• Type: Array<string>
• Default: []

Register others custom block.

<style>
  .greet {
    color: #2a7;
    background-color: #58a;
  }
</style>

<script>
  new Docute({
    // ...
    plugins: [
      docuteCustomContainer({
        registerContainer: ['greet']
      })
    ]
  })
</script>

Then you can use the new container in markdown file

::: greet
greeter!
:::

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-custom-container © evillt, Released under the MIT License.

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

evila.me · GitHub @evillt · Twitter @evillt