vue-code-info
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
Dependencies
Dependencies
@vue/eslint-config-prettier: ^6.0.0babel-eslint: ^10.1.0eslint: ^7.17.0eslint-config-prettier: ^7.1.0eslint-plugin-prettier: ^3.3.1eslint-plugin-vue: ^7.4.1prettier: ^2.2.1vue-cli-plugin-markdown: ~0.1.2vue-cli-plugin-tailwind: ~2.0.1vue-highlightjs: ^1.3.3vue-markdown-loader: ^2.4.1webpack: ^5.12.2