National Puppy Menace

    @highlightjs/vue-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    Highlight.js plugin for Vue.js

    latest version latest version vue 3 vue 2 license

    publish size gzipped size slack

    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. The latest tag via NPM is compatible with Vue.js v2; the next tag 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 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 hljs from 'highlight.js/lib/common';
    import hljsVuePlugin from "@highlightjs/vue-plugin";
    
    const app = createApp(App)
    app.use(hljsVuePlugin)
    app.mount('#app')

    Using component locally

    <template>
        <highlightjs
            language="js"
            code="console.log('Hello World');"
        />
    </template>
    
    <script>
    import hljs from '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
    

    Keywords

    none

    Install

    npm i @highlightjs/vue-plugin

    DownloadsWeekly Downloads

    2,946

    Version

    2.1.0

    License

    BSD-3-Clause

    Unpacked Size

    12.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • marcosc
    • joshgoebel
    • isagalaev
    • highlightjs_bot