kokk

kokk

A beautiful way to display a demo and the usage from markdown.

The design is inspired by Ant Design! I like the elegant design to display a demo.

The name is inspired by Kokkoku 💃

Install

yarn add kokk --save

CDN: UNPKG | jsDelivr (available as window.kokk)

Usage

<template>
  <div id="app">
    <kokk>
      <span slot="demo">meow (ฅ>ω<*ฅ)</span>
    </kokk>
  </div>
</template>

<script>
import kokk from 'kokk'

export default {
  components: {
    kokk
  }
}
</script>

Options

title

Type: string
Default: Basic

The title of the demo.

desc

Type: string
Default: Basic

The title of the demo.

expandAll

Type: boolean
Default: false

The title of the demo.

highlight

Type: boolean function
Default: true

Whether to highlight code blocks, you can supply a function to customize this, use prismjs to highlight code by default.

function highlight(code, lang) {}

root

Type: string
Default: ./

The relative path of the markdown file.

doc

Type: string
Default: demo.md

The name markdown file.

Slot

Import the package which you want to show and use it as a slot.

Here is a simple example:

<template>
  <div id="app">
    <kokk root="./docs/">
      <star-rate slot="demo" :value="3"
                 type="star1"/>
    </kokk>
  </div>
</template>

<script>
import kokk from '../src'
import StarRate from 'vue-cute-rate'

export default {
  components: {
    kokk,
    StarRate
  }
}
</script>

License

MIT © luyilin

minemine.cc · GitHub @luyilin · Twitter @luyilin12