Highlight.js Vue Plugin systematically ignores language value passed to it

[fabricepallaud]

Whether I call the plugin directly from my template section or mount it programmatically and passing to it a language prop value, the language I specify always ends up being ignored by the plugin who instead chooses himself a language.

From template section:

<highlightjs language='javascript' code="var x = 5;" />

From script section (programmatically):

<template>
  <div class="myElement"></div>
</template>

<script setup>
// some code here...

nextTick(() => {
  mount(HighlightPlugin.component, {
    element: document.querySelector('.myElement'),
    props: {
      language: 'javascript',
      code: codeSnippet
    }
  })
})
</script>

Here's how the plugin is imported in my main.js:

import 'highlight.js/styles/github-dark-dimmed.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
app.use(hljsVuePlugin)

app.mount('#app')

[joshgoebel]

What languages do you usually see getting chosen?

[fabricepallaud]

@joshgoebel Javascript and HTML (ideally Vue component too but I don't think that package supports that).

[joshgoebel]

Maybe add some debugging to output the value of hljs.listLanguages() and see what that returns just to confirm you're loading them all.

[fabricepallaud]

Thanks, yep I just console logged that and they do appear to load fine:

[artemonsh]

I ran into the same problem

The solution is to pass :autodetect="false" and the language you would like to use language="python"

I found the solution by reading the source code for 1 minute 🤣

[joshgoebel]

It looks to me (reading source) that setting language should override the autodetect prop, am I missing something?