Vue-hljs2 NPM | npm.io

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>