Vue-code-info NPM

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.

vue-code-info

Documentation

Install it with Yarn or NPM

yarn add -D vue-code-info

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