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

安装npm包

npm安装

npm i vue-codemirror6 codemirror
1

或者yarn安装

yarn add vue-codemirror6 codemirror
1

基础配置+自定义主题+json格式显示

效果如下

安装json语言包

npm i @codemirror/lang-json
1

完整代码显示如下

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CodeMirror from 'vue-codemirror6'
import { json } from '@codemirror/lang-json';

const initJson = {
  name: `maybaby`,
  year: 25,
  weight: 45,
  height: 165
}
// 初始化
let codeVal = ref('');
// 转成json字符串并格式化
codeVal.value = JSON.stringify(initJson, null, '\t')
// json
const lang = json();
// 主题样式设置
const theme = {
  "&": {
    color: "white",
    backgroundColor: "#034"
  },
  ".cm-content": {
    caretColor: "#0e9"
  },
  "&.cm-focused .cm-cursor": {
    borderLeftColor: "#0e9"
  },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074"
  },
  ".cm-gutters": {
    backgroundColor: "#045",
    color: "#ddd",
    border: "none"
  }
}
onMounted(() => {

})
</script>

<template>
  <div class="main">
    <code-mirror basic :lang="lang" v-model="codeVal" style="height: 400px;" :theme="theme"/>
  </div>
</template>
<style >
.main {
  width: 100%;
  height: 100%;
}
/* required! */
.cm-editor {
  height: 100%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

设置官方主题

官网有这3种主题，任君选择

我这用了第一种主题，效果如下

安装主题包

npm i @codemirror/theme-one-dark
1

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CodeMirror from 'vue-codemirror6'
import { oneDark } from '@codemirror/theme-one-dark'
import { json } from '@codemirror/lang-json';

const initJson = {
  name: `maybaby`,
  year: 25,
  weight: 45,
  height: 165
}
// 初始化
let codeVal = ref('');
// 转成json字符串并格式化
codeVal.value = JSON.stringify(initJson, null, '\t')

// json语言
const lang = json();
// 扩展
const extensions = [oneDark];

onMounted(() => {
})
</script>

<template>
  <div class="main">
    <code-mirror 
    v-model="codeVal" 
    basic 
    :lang="lang" 
    style="height: 400px;" 
    :extensions="extensions"/>
  </div>
</template>
<style>
/* required! */
.cm-editor {
  height: 100%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

basic使用了基础的配置，例如行高，可折叠这些。

后面有时间把校验加上