vue3 tinymce让代码高亮

要让 Vue3 的 tinymce 组件支持代码高亮，可以使用 tinymce 的 Code Sample 插件。首先需要在组件中引入 Code Sample 插件，然后在 tinymce 的初始化配置中启用该插件，并设置插件的语言列表。以下是一个示例代码：

<template>
  <div>
    <tinymce v-model="content" :init="initSettings"></tinymce>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/skins/ui/oxide/content.css';

export default {
  components: {
    tinymce,
  },
  data() {
    return {
      content: '',
      initSettings: {
        skin: false,
        content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }',
        plugins: 'code codesample',
        toolbar: 'undo redo | bold italic underline | code | codesample',
        codesample_languages: [
          { text: 'HTML/XML', value: 'markup' },
          { text: 'JavaScript', value: 'javascript' },
          { text: 'CSS', value: 'css' },
          { text: 'PHP', value: 'php' },
          { text: 'Ruby', value: 'ruby' },
          { text: 'Python', value: 'python' },
          { text: 'Java', value: 'java' },
          { text: 'C', value: 'c' },
          { text: 'C#', value: 'csharp' },
          { text: 'C++', value: 'cpp' },
        ],
      },
    };
  },
};
</script>

在上面的代码中，首先引入了 tinymce、Code Sample 插件以及相关的 CSS 文件。然后在组件的 data 中定义了 content 和 tinymce 的初始化配置项。其中，需要注意的是，codesample_languages 列表中的 value 值应该与 Prism.js 支持的语言名称一致。最后在组件的模板中使用 tinymce 组件即可。

需要注意的是，如果你要使用 Vue3 的 tinymce 组件，需要安装 @tinymce/tinymce-vue3 包。此外，为了让代码高亮正常工作，还需要在项目中引入 Prism.js 库，并在页面中引入 Prism.js 的 CSS 文件。