vue-highlight.js

3.1.0 verified Sat Apr 25 auth: no javascript

A Vue.js component that integrates highlight.js for syntax highlighting. Version 3.1.0 targets Vue 2 and highlight.js ^9.11.0. The package previously bundled all languages but since v3.0.0 requires manual language imports to reduce bundle size. It ships TypeScript definitions and uses Vue's plugin system via Vue.use(). The package has beta releases for v4 which support highlight.js v10 and Vue language definitions.

Common errors

error Unknown custom element: <highlightjs> - did you register the component correctly? ↓

cause Component not registered globally because Vue.use() was not called or was called incorrectly.

fix

Call Vue.use(VueHighlightJS) before creating the Vue instance.

error Cannot find module 'vue-highlight.js/lib/languages/vue' ↓

cause Language path incorrect or language not installed. Ensure you are importing from the correct path.

fix

Use correct path: import 'vue-highlight.js/lib/languages/vue'

error highlight.js is not defined ↓

cause highlight.js peer dependency not installed.

fix

Run: npm install highlight.js@^9.11.0

Warnings

breaking Since v3.0.0, languages are not automatically imported; you must manually import each language you need. ↓

fix Import languages manually, e.g., import 'vue-highlight.js/lib/languages/javascript'

breaking Peer dependency changed: highlight.js is now a peer dependency, not a bundled dependency. ↓

fix Install highlight.js separately: npm install highlight.js

gotcha The component name is 'highlightjs' by default when using Vue.use(). Do not use PascalCase or other names. ↓

fix Use <highlightjs> in templates, or register with a custom name via options.

deprecated v3.x does not support highlight.js v10. Use v4.x beta for highlight.js v10 support. ↓

fix Upgrade to v4.0.0-beta or later

Install

npm install vue-highlight.js

yarn add vue-highlight.js

pnpm add vue-highlight.js

Imports

VueHighlightJS

wrong

const VueHighlightJS = require('vue-highlight.js')

correct

import VueHighlightJS from 'vue-highlight.js'

Default ESM import. CommonJS require may work but ESM recommended.

VueHighlightJS (via component)
wrong
```
Vue.component('highlightjs', VueHighlightJS)
```
correct
```
Vue.use(VueHighlightJS)
```
Must call Vue.use() to register the component globally with default name 'highlightjs'.
languages
wrong
```
import VueHighlightJS from 'vue-highlight.js'
```
correct
```
import 'vue-highlight.js/lib/languages/vue'
```
Languages must be imported separately after v3.0.0. This imports the Vue language definition.
allLanguages
wrong
```
import VueHighlightJS from 'vue-highlight.js'
```
correct
```
import 'vue-highlight.js/lib/allLanguages'
```
Import all languages from highlight.js. Only available since v3.1.0.

Quickstart

Install and use the plugin with Vue 2, importing custom languages and rendering a highlighted code block.

import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
import 'vue-highlight.js/lib/languages/javascript';
import 'vue-highlight.js/lib/languages/css';

Vue.use(VueHighlightJS);

new Vue({
  el: '#app',
  template: '<highlightjs code="console.log(\'hello\')" lang="javascript" />'
});