使用vue-codemirror6实现代码编辑器,支持多语言

Vue CodeMirror 6是一个基于Vue.js和CodeMirror的组件库，用于实现代码编辑器。它支持多种语言和主题，并提供了许多自定义选项。

下面是一个使用Vue CodeMirror 6实现代码编辑器的示例：

1. 安装vue-codemirror6

npm install vue-codemirror6

2. 在Vue组件中使用CodeMirror

<template>
  <div>
    <codemirror v-model="code" :options="cmOptions" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import CodeMirror from '@uiw/react-codemirror'
import 'codemirror/keymap/sublime'
import 'codemirror/theme/dracula.css'
import 'codemirror/mode/javascript/javascript'

export default defineComponent({
  name: 'CodeEditor',
  components: {
    CodeMirror
  },
  data() {
    return {
      code: '',
      cmOptions: {
        theme: 'dracula',
        keyMap: 'sublime',
        mode: 'javascript',
        lineNumbers: true
      }
    }
  }
})
</script>

在这个示例中，我们首先导入并注册了`CodeMirror`组件，并定义了一个`code`变量来存储用户输入的代码。然后，我们使用`cmOptions`对象来配置CodeMirror实例的选项，包括主题、按键映射、语言模式和行号。

最后，我们将`code`变量和`cmOptions`对象分别绑定到`v-model`和`options`属性上，这样就可以实现一个完整的代码编辑器。

需要注意的是，在这个示例中我们只使用了JavaScript语言模式，如果需要支持其他语言，需要根据需要引入对应的模式文件，如`codemirror/mode/htmlmixed/htmlmixed`等。

总之，使用Vue CodeMirror 6可以方便快捷地创建一个功能强大的代码编辑器，并支持多种语言和主题的自定义。