- Notifications
You must be signed in to change notification settings - Fork30
highlightjs/vue-plugin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This plugin provides ahighlightjs 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 the1-stable branch here on GitHub. Version 1.x.x is compatible with Vue.js v2; version 2.x.x with Vue.js v3.
npm add @highlightjs/vue-plugin
As aVue Plugin:
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 importshighlight.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 thehighlight.js/lib/common import does not import thehljs object because it registers common languages internally and modern web bundlers likewebpack will optimize out unused imported names. If you want to customize thehljs object, you can import it like theprevious example.
The component can also be imported locally. However, you still have to import the css styles somewhere.
<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>
<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)
We use rollup to build thedist distributable.
npm run buildAbout
Highlight.js Vue Plugin
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.