https://github.com/osamaesmail/vue-hljs2

highlight.js plugin for vue
https://github.com/osamaesmail/vue-hljs2

highlight highlightjs html syntax syntax-highlighting vue vuejs vuejs2

Last synced: 25 days ago
JSON representation

highlight.js plugin for vue

• Host: GitHub
• URL: https://github.com/osamaesmail/vue-hljs2
• Owner: osamaesmail
• License: mit
• Created: 2019-03-16T20:17:13.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-16T20:41:49.000Z (almost 6 years ago)
• Last Synced: 2024-12-03T05:06:39.914Z (about 1 month ago)
• Topics: highlight, highlightjs, html, syntax, syntax-highlighting, vue, vuejs, vuejs2
• Language: CSS
• Homepage: http://vue-hljs2.osamaesmail.info
• Size: 1.36 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-hljs2

[![npm](https://img.shields.io/npm/v/vue-hljs2.svg)](https://www.npmjs.com/package/vue-hljs2) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

> Highlight.js plugin for Vue.js 2.

## [Demo](http://vue-hljs2.osamaesmail.info)

## Installation

```bash

npm install --save vue-hljs2

```

## Usage

### Bundler (Webpack, Rollup) `full version`

```js

import Vue from 'vue'

import VueHljs from 'vue-hljs2'

Vue.use(VueHljs)

```

### Bundler (Webpack, Rollup) `lite version`

```js

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

```html

```

## 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`

```js

import Vue from 'vue'

import VueHljs from 'vue-hljs2'

Vue.use(VueHljs, {

    language: 'javascript',

    theme: 'monokai',

    numbers: true,

})

```

### example `with default options`

```html

// code is here

```

### example `override default options`

```html

// code is here

```

### example `get the raw codes`

```html



    

    // code is here

    



new Vue({

    el: '#app',

    mounted: function() {

        // will print the raw code of name = code1

      console.log(this.$vueHljs.codes.code1)

    }

})

```

## License

[MIT](http://opensource.org/licenses/MIT)