Vue Highlight.js

📜 Highlight.js syntax highlighter component for Vue.

Installation

Via NPM:

1. Install highlight.js:

   npm install highlight.js

2. Install Vue Highlight.js:

   npm install vue-highlight.js

Or Yarn:

1. Install highlight.js:

   yarn add highlight.js

2. Install Vue Highlight.js:

   yarn add vue-highlight.js

Demo

Go to https://gluons.github.io/vue-highlight.js

Usage

Main file:

import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
import App from './App';

/*
 * Use Vue Highlight.js
 */
Vue.use(VueHighlightJS);

/*
 * Import Highlight.js theme
 * Find more: https://highlightjs.org/static/demo/
 */
import 'highlight.js/styles/default.css';

new Vue({
	el: '#app',
	render: h => h(App)
});

Vue file:

<template>
	<div id="app">
		<!-- Code Block -->
		<highlight-code lang="javascript">
			let str = 'Hello, World!';
			console.log(str);
		</highlight-code>

		<!-- Inline Code Block -->
		<highlight-code lang="javascript" inline>alert('Hello, World!');</highlight-code>
	</div>
</template>

<script>
// JavaScript...
</script>

<style>
/* StyleSheet... */
</style>

API

highlight-code

Highlight.js code block.

Slots

Static code content.

Properties

lang

Type: String

Highlight.js language.

inline

Type: Boolean
Default: false

Enable inline code block when set it to true.

code

Type: String

Code content in code block.

Component will ignores slots static content if you use this.

You can use this property if you want to bind code content to your data source.
It's useful for dynamic code content.

On Trello