Registry / web-framework / vue-highlight.js

vue-highlight.js

library3.1.0jsnpmunverified

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.

web-framework

npm install vue-highlight.js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-HIGHLIGHT.JS

vue-highlight.js

web-frameworkjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueHighlightJS

✓ import VueHighlightJS from 'vue-highlight.js'

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

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

VueHighlightJS (via component)

✓ Vue.use(VueHighlightJS)

✗ Vue.component('highlightjs', VueHighlightJS)

Must call Vue.use() to register the component globally with default name 'highlightjs'.

languages

✓ import 'vue-highlight.js/lib/languages/vue'

✗ import VueHighlightJS from 'vue-highlight.js'

Languages must be imported separately after v3.0.0. This imports the Vue language definition.

allLanguages

✓ import 'vue-highlight.js/lib/allLanguages'

✗ import VueHighlightJS from 'vue-highlight.js'

Import all languages from highlight.js. Only available since v3.1.0.

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" />' });

Debug

Known issues

breakingSince 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'

affects: >=3.0.0 <3.1.0

breakingPeer dependency changed: highlight.js is now a peer dependency, not a bundled dependency.

fix

Install highlight.js separately: npm install highlight.js

affects: >=2.0.0

gotchaThe 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.

affects: *

deprecatedv3.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

affects: >=3.0.0 <4.0.0

Errors

Common errors & fixes

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

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

fix

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

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

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'

highlight.js is not defined

highlight.js peer dependency not installed.

fix

Run: npm install highlight.js@^9.11.0

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

vuerequiredpeer dependency for Vue 2

highlight.jsrequiredpeer dependency for syntax highlighting library

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/gluons/vue-highlight.js ↗

packagehttps://www.npmjs.com/package/vue-highlight.js ↗

homepagehttps://gluons.github.io/vue-highlight.js/ ↗