https://github.com/metachris/vue-highlightjs

Syntax highlighting with highlight.js for Vue.js 2.x
https://github.com/metachris/vue-highlightjs

highlighting highlightjs javascript vuejs vuejs2

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/metachris/vue-highlightjs
• Owner: metachris
• Archived: true
• Created: 2017-02-02T15:55:18.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-05-24T15:54:38.000Z (over 3 years ago)
• Last Synced: 2024-10-09T08:08:11.231Z (4 months ago)
• Topics: highlighting, highlightjs, javascript, vuejs, vuejs2
• Language: JavaScript
• Size: 17.6 KB
• Stars: 337
• Watchers: 7
• Forks: 41
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-highlightjs

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

* https://github.com/highlightjs/vue-plugin

* https://www.npmjs.com/package/@highlightjs/vue-plugin

---

[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

Simply install the [npm package `vue-highlightjs`](https://www.npmjs.com/package/vue-highlightjs):

    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'

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:

```html



const s = new Date().toString()

```

---


* 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  (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)