vue-highlightjs

WebJar for vue-highlightjs

License	MIT
GroupId	org.webjars.npm
ArtifactId	vue-highlightjs
Last Version	1.1.0
Release Date	Feb 22, 2017
Type	jar
Description	vue-highlightjs WebJar for vue-highlightjs
Project URL	http://webjars.org
Source Code Management	https://github.com/metachris/vue-highlightjs

Download vue-highlightjs

Filename	Size
vue-highlightjs-1.1.0.pom
vue-highlightjs-1.1.0.jar	4 KB
vue-highlightjs-1.1.0-sources.jar	22 bytes
vue-highlightjs-1.1.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-highlightjs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-highlightjs</artifactId>
    <version>1.1.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vue-highlightjs/
implementation 'org.webjars.npm:vue-highlightjs:1.1.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vue-highlightjs/
implementation ("org.webjars.npm:vue-highlightjs:1.1.0")

Apache Buildr

'org.webjars.npm:vue-highlightjs:jar:1.1.0'

Apache Ivy

<dependency org="org.webjars.npm" name="vue-highlightjs" rev="1.1.0">
  <artifact name="vue-highlightjs" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vue-highlightjs', version='1.1.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vue-highlightjs" % "1.1.0"

Leiningen

[org.webjars.npm/vue-highlightjs "1.1.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : highlight.js	jar	[0,)

Project Modules

There are no modules declared in this project.

vue-highlightjs

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 [email protected] (https://www.metachris.com)

License: MIT

Contributors:

• Chris Hager
• mr-krille
• Duoc Nguyen
• Shu Ding

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)

Versions

Version
1.1.0 Feb 22, 2017