vue-highlightjs

This project is superseded by the official Highlight.js Vue plugin:

Vue.js syntax highlighting made easy, using highlight.js.

Quickstart

Installation

Simply install the npm package vue-highlightjs:

npm install --save vue-highlightjs

Using vue-highlightjs

In your main JavaScript file (eg. main.js):

// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/default.css' // or other highlight.js theme

// Tell Vue.js to use vue-highlightjs
Vue.use(VueHighlightJS)

In your template, in order to highlight javascript code:

<!-- If your source-code lives in a variable called 'sourcecode' -->
<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

<!-- If you want to highlight hardcoded source-code -->
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>

You can see a live example here: https://www.python-boilerplate.com/
Fiddle with it: https://jsfiddle.net/metachris/1vz9oobc/
See also this blog post for more information: https://www.metachris.com/2017/02/vuejs-syntax-highlighting-with-highlightjs/

Contributing

Any sort of contributions and feedback is much appreciated. Just leave an issue or pull-request!

This project uses the AirBnB code style.

Please run npm run lint and npm run test before you submit a pull request! <3

About

Author: Chris Hager chris@linuxuser.at (https://www.metachris.com)

License: MIT

Contributors:

Changelog

v1.3.3

Documentation

v1.3.1

Changed const to var for compatibility with PhantomJS and UglifyJS
Bugfix to allow empty content

v1.2.2

Fixed displaying and highlighting HTML tags passed as value to the directive (thanks @nguyenvanduocit)

Uh oh!

metachris/vue-highlightjs

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors 6

Uh oh!

Languages

Error
Looks like something went wrong!

Packages