vue-codemirror6+vue3的基础使用（行高、json字符串、黑暗主题、自定义主题）

<template>
  <div>
    <CodeMirror
      v-model="code"
      :configuration="cmConfig"
      :style="{ height: '500px' }"
    />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { CodeMirror } from 'vue-codemirror6';
import 'codemirror/theme/monokai.css';
import 'codemirror/theme/material-darker.css';
import 'codemirror/mode/javascript/javascript';
 
// 导入vue-codemirror6的css文件
import 'vue-codemirror6/lib/codemirror.css';
 
// 定义编辑器的配置
const cmConfig = {
  mode: 'javascript', // 设置编辑器的语言模式
  theme: 'monokai', // 设置编辑器的主题
  lineNumbers: true, // 显示行号
  lineHeight: 1.5, // 设置行高
};
 
// 定义绑定的数据
const code = ref(`
  // 这是一个JSON字符串
  const jsonString = '{\n  "name": "Vue",\n  "version": "3"\n}';
`);
</script>

这段代码展示了如何在Vue 3应用中使用vue-codemirror6来创建一个代码编辑器实例，包括行高设置、主题切换（包括黑暗主题）、以及如何绑定和显示JSON字符串。