CODEWITHSUNDEEP
vuejs3prophighlightjs
drake035
drake035

Reputation: 2897

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

Whether I call the plugin directly from my template section or mount it programmatically while 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')

EDIT - updated version:

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

app.mount('#app')

Upvotes: 3

Views: 445

Answers (0)

Related Questions