Awesome
Highlight.js plugin for Vue.js
This plugin provides a highlightjs
component for use in your Vue.js 3 applications:
<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='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.
Using the pre-built libraries
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script src="/path/to/highlight-vue.min.js"></script>
Then simply register the plugin with Vue:
const app = createApp(App)
app.use(hljsVuePlugin)
Using ES6 modules / bundling
import 'highlight.js/styles/stackoverflow-light.css'
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage('javascript', javascript);
const app = 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';
import hljsVuePlugin from "@highlightjs/vue-plugin";
const app = 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.
Using component locally
<template>
<highlightjs
language="js"
code="console.log('Hello World');"
/>
</template>
<script>
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
export default {
components: {
highlightjs: hljsVuePlugin.component
}
}
</script>
Building the pre-built library from source
We use rollup to build the dist
distributable.
npm run build