This plugin provides a highlightjs component for use in your Vue.js 3 applications:

<divid="app"><!-- bind to a data property named `code` --><highlightjsautodetect:code="code" /><!-- or literal code works as well --><highlightjslanguage='javascript' code="var x = 5;" /></div>

Note: For Vue.js version 2 support see the 1-stable branch here on GitHub. Version 1.x.x is compatible with Vue.js v2; version 2.x.x with Vue.js v3.

<template><highlight-jsautodetectcode="function(){}" /></template><scriptsetup>import'highlight.js/lib/common';import{HighlightJs}from"@highlightjs/vue-plugin";</script>

<linkrel="stylesheet" href="/path/to/styles/default.css"><scriptsrc="/path/to/highlight.min.js"></script><scriptsrc="/path/to/highlight-vue.min.js"></script>

Then simply register the plugin with Vue:

constapp=createApp(App)app.use(hljsVuePlugin)

import'highlight.js/styles/stackoverflow-light.css'importhljsfrom'highlight.js/lib/core';importjavascriptfrom'highlight.js/lib/languages/javascript';importhljsVuePluginfrom"@highlightjs/vue-plugin";hljs.registerLanguage('javascript',javascript);constapp=createApp(App)app.use(hljsVuePlugin)app.mount('#app')

Note: The plugin imports highlight.js/lib/core internally (but no languages). Thanks to the magic of ES6 modules you can import Highlight.js anywhere to register languages or configure the library. Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.

You can also simply load all "common" languages at once (as of v11):

import'highlight.js/styles/stackoverflow-light.css'import'highlight.js/lib/common';importhljsVuePluginfrom"@highlightjs/vue-plugin";constapp=createApp(App)app.use(hljsVuePlugin)app.mount('#app')

Note that the highlight.js/lib/common import does not import the hljs object because it registers common languages internally and modern web bundlers like webpack will optimize out unused imported names. If you want to customize the hljs object, you can import it like the previous example.

<template> <highlightjslanguage="js"code="console.log('Hello World');" /> </template> <script>import'highlight.js/lib/common';importhljsVuePluginfrom"@highlightjs/vue-plugin";exportdefault{ components:{ highlightjs:hljsVuePlugin.component }}</script>

We use rollup to build the dist distributable.

npm run build