Is it working right now?

[arneesh]

I added it to a Vue 3 project and the output I am getting is this(Attached a screenshot below). Even with specifically setting the language to js.

Dependency Versions

• highlight.js": "^11.2.0
• "@highlightjs/vue-plugin": "^2.1.0"

Installation

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);

 app.use(hljsVuePlugin)

Usage: Step 1

<template>
       <highlightjs
        language="js"
        code="function chipPaginate(page) {
    if (typeof sortOrderNew === 'undefined')
        var sortOrder = 3;

    if (typeof sortOrderNew !== 'undefined')
        var sortOrder = sortOrderNew;

    console.log(sortOrder);
}
"
    />
</template>

Usage: Step 2

<script>
  components: {
        "highlightjs": hljsVuePlugin.component
  },
</script>

Output

[Trinovantes]

language="js" should be language="javascript"

[joshgoebel]

Why? Pretty sure the component supports aliass just fine.

[arneesh]

Thanks for the quick response guys. @Trinovantes I tried that as well. Wasn't working either...

[Trinovantes]

Can you provide a repo?

edit: I suspect you're not importing a theme CSS e.g. import 'highlight.js/styles/stackoverflow-light.css'

[arneesh]

Ah, yes that was the issue. Thanks for the help I appreciate it.