vue3引入highlight.js进行代码高亮的方法实例

    <TestPlan guiclass="TestPlanGui" testclass="TestPlan" testname="自动化测试">
      <stringProp name="TestPlan.comments"></stringProp>
      <boolProp name="TestPlan.functional_mode">false</boolProp>
      <boolProp name="TestPlan.tearDown_on_shutdown">true</boolProp>
      <boolProp name="TestPlan.serialize_threadgroups">false</boolProp>
      <elementProp name="TestPlan.user_defined_variables" elementType="Arguments">
        <collectionProp name="Arguments.arguments"/>
      </elementProp>
    </TestPlan>

## 这个是highlight.js基础依赖
npm install --save highlight.js
## 安装支持vue3 的@highlightjs/vue-plugin 依赖
npm install --save @highlightjs/vue-plugin

# --- 文件src/main.ts | src/main.js 
# highlight 的样式，依赖包，组件
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

import { computed, createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 引入代码高亮，并进行全局注册
app.use(hljsVuePlugin)
app.mount('#app')

    <!-- 把数据绑定到 `code` 属性-->
    <highlightjs autodetect :code="code" />
    <!--或者直接将显示的代码写到 `code`中 -->
    <highlightjs language='javascript' code="var x = 5;" />

<style lang="scss">
pre {
  margin-bottom: 0;
}
</style>