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

Question

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

Answer 1

Beside the current highlightjs/vue-plugin issue 49, you have the 2021 highlightjs/vue-plugin issue 8 "language setting is not effective": there might be problems when different versions of Highlight.js are present in the project's dependency tree. A workaround suggested involved manually installing a specific version of Highlight.js (version 10.7.2), which resolved the issue for a user. But there might be compatibility concerns with newer versions of Highlight.js.
The a console.log(hljs.version);.

Make sure you import it explicitly in your main.js or wherever you configure Highlight.js:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/github-dark-dimmed.css';
hljs.registerLanguage('javascript', javascript);

Double-check if there is any code that might be overwriting the language prop or if the plugin has default behavior when it fails to recognize the specified language. That could happen if the language module was not imported.

import Vue from 'vue';
import App from './App.vue';
import 'highlight.js/styles/github-dark-dimmed.css';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from '@highlightjs/vue-plugin';

// Register the JavaScript language
hljs.registerLanguage('javascript', javascript);

Vue.use(hljsVuePlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

---

It is still not working and there is nothing overwriting the language prop - just me passing value javascript to the language prop when calling the plugin.
I did not have highlight.js installed, only @highlightjs/vue-plugin.
I installed it (package.json: "highlight.js": "^11.9.0"), but it does not make any difference.

Then try and implement a diagnostic script in your Vue project:

import { onMounted } from 'vue';
import hljs from 'highlight.js';

export default {
  setup() {
    onMounted(() => {
      // Debug function to check language availability
      function debugHighlightJs() {
        // List of languages you want to check
        const languagesToCheck = ['javascript', 'python', 'html'];
        languagesToCheck.forEach((lang) => {
          if (hljs.getLanguage(lang)) {
            console.log(`Language loaded: ${lang}`);
          } else {
            console.error(`Language not found: ${lang}`);
          }
        });
        // Attempt to highlight a simple code snippet
        const code = 'const x = 5;';
        const result = hljs.highlight(code, { language: 'javascript' });
        console.log(`Highlight result: ${result.value}`);
      }

      // Call the debug function
      debugHighlightJs();
    });
  },
}

That way, you will see the currently used Highlight.js version. And you will check if the specified languages are correctly registered and available.
You can also test with this script if a simple JavaScript code snippet is correctly highlighted.

The goal is to see if the issue lies with language detection or plugin integration.