# vue-highlightjs

> Syntax highlighting with highlight.js for Vue.js 2.x

Latest version **1.3.3** (published 2017-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-highlightjs
pnpm add vue-highlightjs
yarn add vue-highlightjs
bun add vue-highlightjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2017-05-29 |
| First published | 2017-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 336 |
| Author | Chris Hager |
| Maintainers | metachris |
| Keywords | vue, vuejs, syntax, highlight, highlight.js |

## Links

- npm: https://www.npmjs.com/package/vue-highlightjs
- Repository: https://github.com/metachris/vue-highlightjs
- Issues: https://github.com/metachris/vue-highlightjs/issues
- npm.io page: https://npm.io/package/vue-highlightjs

## Dependencies (1)

- [highlight.js](https://npm.io/package/highlight.js.md) *

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.3.3 (latest) — 2017-05-29
- 1.3.1 — 2017-05-17
- 1.2.3 — 2017-05-10
- 1.2.2 — 2017-03-22
- 1.2.1 — 2017-03-22
- 1.2.0 — 2017-03-17
- 1.1.0 — 2017-02-06
- 1.0.2 — 2017-02-02
- 1.0.1 — 2017-02-02
- 1.0.0 — 2017-02-02

## README

# vue-highlightjs

[Vue.js](https://vuejs.org/) syntax highlighting made easy, using [highlight.js](https://highlightjs.org/).

[![Build Status](https://travis-ci.org/metachris/vue-highlightjs.svg?branch=master)](https://travis-ci.org/metachris/vue-highlightjs)

## Quickstart

### Installation

    npm install --save vue-highlightjs

### Using vue-highlightjs

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

```javascript
// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'

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

In your template, in order to highlight javascript code:

```html
<!-- 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](https://github.com/airbnb/javascript).

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:

* [Chris Hager](https://www.metachris.com)
* [mr-krille](https://github.com/mr-krille)
* [Duoc Nguyen](https://github.com/nguyenvanduocit)
* [Shu Ding](https://github.com/shudin)


## Changelog

v1.3.3

* Documentation

v1.3.1

* Changed `const` to `var` for compatibility with PhantomJS and UglifyJS
* [Bugfix](https://github.com/metachris/vue-highlightjs/pull/6) to allow empty content

v1.2.2

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

---
_Source: https://npm.io/package/vue-highlightjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._