Vue Code Info

Display a header to code blocks in markdown for example with color of language and option for file path. It's for guides about plugins or frameworks.

Documentation

Install it with Yarn or NPM

yarn add -D vue-code-info

OR

npm i vue-code-info --save-dev

Import it, ES6 way, in main.js / app.js file

import VueCodeInfo from 'vue-code-info'

Vue.use(VueCodeInfo)

Usage

Use it in a .vue file

<template>
  <div>
    <vue-code-info ext="js" path="index.js">
      <pre><code>import VueCodeInfo from './lib/vue-code-info.vue'

      export default {
        install(Vue) {
          Vue.component('vue-code-info', VueCodeInfo)
        },
      }</pre></code>
    </vue-code-info>
  </div>
</template>

Use in .md in vuepress or nuxt / content

## Example of code

<vue-code-info ext="js" path="index.js">

```js
import VueCodeInfo from './lib/vue-code-info.vue'

export default {
  install(Vue) {
    Vue.component('vue-code-info', VueCodeInfo)
  },
}

API

| Props | Type | Default | Describe | |--------------|---------|---------|----------------------------------------------------------------------------| | ext | String | '' | Extension of file, display it on header and get correct color if available | | path | String | '' | Path of the file, useful if it's guide for a framework | | hasMargin | Boolean | true | To get margin top and bottom | | notReachable | Boolean | false | To apply a layer to prevent user to get code |

License

MIT © @ewilan-riviere