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

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

vue-highlightjs .Vue.js syntax highlighting made easy, using highlight.js.

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'

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

In your template, in order to highlight javascript code:

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

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

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:

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)

Download Details:

Author: metachris

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

vuejs javascript vue vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router