vue-hljs2
v1.0.2
Published
Highlight.js plugin for Vue.js 2.
Downloads
8
Readme
vue-hljs2
Highlight.js plugin for Vue.js 2.
Demo
Installation
npm install --save vue-hljs2
Usage
Bundler (Webpack, Rollup) full version
import Vue from 'vue'
import VueHljs from 'vue-hljs2'
Vue.use(VueHljs)
Bundler (Webpack, Rollup) lite version
import Vue from 'vue'
import VueHljs from 'vue-hljs2/vueHljsLite'
import 'vue-hljs2/themes/monkai'
import 'vue-hljs2/dist/themes/monokai.js'
import javascript from 'highlight.js/lib/languages/javascript'
vuehljs.registerLanguage('javascript', javascript)
Vue.use(VueHljs)
Browser
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-hljs2/dist/vue-hljs.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-hljs2"></script>
options
|option|default|description|
|---|---|---|
|language|''|is a string for the default language|
|theme|''|is a string for the default theme|
|numbers|false
|to display line numbers|
|numbers|false
|to display line numbers|
|inline|false
|to make the display inline|
|tag|pre|the container tag inline option will set this tage to span
|
|autoDetection|false
|language detection|
|ignoreIllegals|false
|forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception|
|continuation|false
|is an optional mode stack representing unfinished parsing. When present, the function will restart parsing from this state instead of initializing a new one|
Example assign options
import Vue from 'vue'
import VueHljs from 'vue-hljs2'
Vue.use(VueHljs, {
language: 'javascript',
theme: 'monokai',
numbers: true,
})
example with default options
<!-- with default options example -->
<hljs>
// code is here
</hljs>
example override default options
<!-- override default options example -->
<hljs theme="monokai-sublime">
// code is here
</hljs>
example get the raw codes
<!-- give the component a name = code1 -->
<div id="app">
<hljs name="code1">
// code is here
</hljs>
</div>
<script>
new Vue({
el: '#app',
mounted: function() {
// will print the raw code of name = code1
console.log(this.$vueHljs.codes.code1)
}
})
</script>