codemirror vue3

CodeMirror是一个强大的开源JavaScript库，用于创建交互式的文本编辑器。它支持语法高亮、自动完成、实时错误检测等功能，非常适合开发需要源码查看或编辑的应用场景，如代码片段预览、IDE插件等。

在Vue3中集成CodeMirror，你可以通过npm安装`@codemirror/mini`和`vue-codemirror`等相关的库来简化过程。首先在项目中安装所需依赖：

npm install @codemirror/mini vue-codemirror

然后，在Vue组件中导入并配置CodeMirror：

<template>
  <div id="editor">
    <codemirror :options="cmOptions" />
  </div>
</template>

<script>
import { CodeMirror } from "vue-codemirror";
import "codemirror/mode/javascript/javascript";

export default {
  components: {
    CodeMirror,
  },
  data() {
    return {
      cmOptions: {
        value: "",
        mode: "javascript",
        lineNumbers: true,
        theme: "default", // 可选主题，如 "abcdefg"
        options: { // CodeMirror 的其他配置项
          indentUnit: 2,
          lineWrapping: true,
        },
      },
    };
  },
};
</script>

在这个例子中，我们设置了默认语言为JavaScript，并配置了行号显示以及主题。你可以根据实际需求调整这些选项。