Highlight.js Vue Plugin忽略传入的language参数问题求助

不管是在模板里直接调用<highlightjs>组件，还是通过编程式挂载组件并传入language属性，指定的语言都会被插件忽略，插件会自动检测并选择语言。

问题复现示例 #

模板调用方式 #

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

编程式挂载方式 #

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

<script setup>
// 其他业务代码...

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

原插件导入配置（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')

解决办法 #

修改main.js中的导入与注册逻辑，显式导入Highlight.js核心库和需要的语言包，完成语言注册后再挂载Vue插件：

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

原因说明 #

原导入方式仅引入了通用包和Vue插件，但没有显式注册指定语言，导致插件无法识别传入的language参数，只能 fallback 到自动检测语言的逻辑。手动注册目标语言后，插件就能正确识别并使用指定的语言进行代码高亮。

内容的提问来源于stack exchange，提问作者drake035