highlight-vue
v1.1.6
Published
[`prismjs`](https://prismjs.com/) for vue component.
Downloads
76
Readme
highlight-vue
prismjs
for vue component.
https://yujinpan.github.io/highlight-vue/
Usage
Install
npm install --save highlight-vue
Global
import Vue from 'vue';
import Highlight from 'highlight-vue';
// theme(required)
// light style
import 'highlight-vue/lib/themes/light';
// dart style
// import 'highlight-vue/lib/themes/dart';
Vue.use(Highlight);
<Highlight :code="code" lang="xml" />
Local
<template>
<Highlight class="code" :code="code" lang="xml" />
</template>
<script>
import Highlight from 'highlight-vue';
// theme(required)
// light style
import 'highlight-vue/lib/themes/light';
// dart style
// import 'highlight-vue/lib/themes/dart';
export default {
components: {
Highlight
},
data() {
return {
code: '<Highlight :code="code" lang="xml" />'
};
}
};
</script>
Add language pack
import 'prismjs';
import 'prismjs/components/prism-java';
<Highlight :code="javaCode" lang="java" />
More themes
import 'prismjs/themes/prism-dark.css';
Props
code
the code contentlang
the language, default importjs
,css
,scss
,shell
,xml
pre
add the<pre></prev
tag to wrap, defaulttrue