DigitalHuman-web/src/components/Highlight/index.vue

<template>
  <pre :class="'hx-scroll ' + lineNumbers"><code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"></code></pre>
</template>
<script setup lang="ts">
import Prism from 'prismjs'
const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'xml'
  },
  isShowLineNumbers: {
    type: Boolean,
    default: false
  }
})
const lineNumbers = computed(() => {
  return props.isShowLineNumbers ? 'line-numbers' : ''
})
onMounted(() => {
  setTimeout(
    () => Prism.highlightAll() // 异步请求的数据，可在获取数据后调用此方法
  )
})
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>