veditor怎么在vue3集成

解决了，现在有一个新的问题，代码块高亮无法显示，如下图，是需要引入什么css吗？

这是引入的代码：

<template>
  <div id="vditor"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

const vditor = ref<Vditor | null>(null)

onMounted(() => {
  initVditor()
})

const initVditor = () => {
  vditor.value = new Vditor('vditor', {
    width: 840,
    height: 420,
    preview: {
      hljs: {
        enable: true,
        lineNumber: true
      }
    },
    toolbar: [
      {
        hotkey: '⌘R',
        name: 'red',
        tipPosition: 'n',
        tip: '文字变红',
        className: 'right',
        icon: '<svg t="1726802702395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12976" width="200" height="200"><path d="M428.987766 97.182088H595.012234l-32.840005 328.400048 267.828484-192.661362 83.073049 143.644614-300.668488 135.738686 300.546858 135.738686-83.073049 143.644614L562.172229 599.147642l32.840005 328.400048H428.987766l32.840005-328.400048L193.999287 791.687374 110.926238 648.04276l300.546859-135.738686L110.926238 376.565388l83.073049-143.644614 267.828484 192.661362-32.840005-328.400048z m0 0" fill="#d81e06" p-id="12977"></path></svg>',
        click() {
          vditor.value?.insertValue('Hello, Vditor!')
        }
      },
      'emoji',
      'headings',
      'bold',
      'italic',
      'strike',
      'line',
      'link',
      '|',
      'list',
      'ordered-list',
      'check',
      'table',
      'upload',
      '|',
      'code',
      'inline-code',
      'quote',
      '|',
      'undo',
      'redo',
      '|',
      'edit-mode',
      'outline',
      'export',
      'fullscreen'
    ],
    toolbarConfig: {
      pin: true
    },
    cache: {
      enable: false
    },
    after: () => {
      if (vditor.value) vditor.value.setValue('hello, Vditor + Vue!')
    }
  })
}
</script>

<style></style>

Vanessa219 / vditor

veditor怎么在vue3集成 #1678