11、vue3使用codemirror编辑器

1、vue-codemirror的使用

在项目有使用到代码编辑器的插件，所以找到codemirror这个插件，在此记录一下codemirror的使用方式
需要安装的插件有：

yarn add codemirror //这个不下会报错
yarn add vue-codemirror
yarn add @codemirror/lang-javascript @codemirror/theme-one-dark

使用代码

<template>
  <div class="box">
    <Codemirror
      class="code"
      v-model="code"
      :style="{ height: '100%' }"
      :extensions="extensions"
      :autofocus="true"
      :disabled="false"
      @ready="handleClick('ready', $event)"
      @change="handleClick('change', $event)"
      @focus="handleClick('focus', $event)"
      @blur="handleClick('blur', $event)"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
const code = ref(`console.log('Hello, world!');console.log('Hello, world!');`);
const extensions = [javascript(), oneDark];
const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};
</script>
<style>
.box {
  width: 100%;
  height: 300px;
  border: 1px solid #f00;
}
.code {
  width: 300px;
  height: 300px;
}
</style>

一般我们百度的时候都是用的JavaScript的语法做示例，但是当我们要切换语法的时候，这个时候就需要用到别的插件了

yarn add @codemirror/language @codemirror/legacy-modes

import { Empty } from 'ant-design-vue';

<template>
  <div class="box">
    <Codemirror
      class="code"
      v-model="code"
      :style="{ height: '100%' }"
      :extensions="extensions"
      :autofocus="true"
      :disabled="false"
      @ready="handleClick('ready', $event)"
      @change="handleClick('change', $event)"
      @focus="handleClick('focus', $event)"
      @blur="handleClick('blur', $event)"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { StreamLanguage } from "@codemirror/language";
import { yaml } from "@codemirror/legacy-modes/mode/yaml";
const code = ref(``);
const extensions = [StreamLanguage.define(yaml), oneDark];
const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};
</script>
<style>
.box {
  width: 100%;
  height: 300px;
  border: 1px solid #f00;
}
.code {
  width: 300px;
  height: 300px;
}
</style>

总的来说就是这样，下面是我看到的已有的高亮语法样式插件，可以参考一下

"@codemirror/commands": "^6.x",
    "@codemirror/lang-cpp": "^6.x",
    "@codemirror/lang-css": "^6.x",
    "@codemirror/lang-html": "^6.x",
    "@codemirror/lang-java": "^6.x",
    "@codemirror/lang-javascript": "^6.x",
    "@codemirror/lang-json": "^6.x",
    "@codemirror/lang-lezer": "^6.x",
    "@codemirror/lang-markdown": "^6.x",
    "@codemirror/lang-php": "^6.x",
    "@codemirror/lang-python": "^6.x",
    "@codemirror/lang-rust": "^6.x",
    "@codemirror/lang-sql": "^6.x",
    "@codemirror/lang-xml": "^6.x",
    "@codemirror/legacy-modes": "^6.x",
    "@codemirror/theme-one-dark": "^6.x",

2、codemirror的使用

其实上面vue-codemirror也是基于codemirror插件开发的，vue-codemirror没有代码对比的功能，有的也是基于5.65X的版本，对vue3的兼容性可能没那么好，经过一番寻找找到了codemirror可以同时满足这些功能，下面我们就来说说不依赖vue-codemirror的使用方式

2.1、下载插件

yarn add codemirror  //注意：默认安装的是6X以上的版本，就是要使用最新版
yarn add @codemirror/merge @codemirror/state @codemirror/view
//下载主题和语言
yarn add @codemirror/theme-one-dark @codemirror/lang-javascript

2.2、开始使用

使用yarn create vite直接创建一个vue3+ts的项目，然后直接修改里面的HelloWorld.vue,把样式相关的都删掉，其他就不需要做什么修改

//HelloWorld.vue
<template>
  <div class="code" ref="coderef"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { MergeView } from "@codemirror/merge";
import { EditorView, basicSetup } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

const coderef = ref(null);
let doc = `let
var
const
four
five`;
onMounted(() => {
  let view = new MergeView({
    a: {
      doc,
      extensions: basicSetup,
    },
    b: {
      doc: doc.replace(/t/g, "T") + "\nSix",
      extensions: [
        basicSetup,
        javascript(),
        oneDark,
        EditorView.editable.of(false),
        EditorState.readOnly.of(true),
      ],
    },
    parent: coderef.value,
  });
});
</script>

<style scoped>
.code {
  width: 100%;
  height: 300px;
}
.ͼ1 .cm-merge-b .cm-changedLine {
  background: #ddfbe6;
}
.ͼ1 .cm-merge-b .cm-changedText {
  background: #c6efd0;
}
.cm-merge-revert {
  display: none;
}
.cm-merge-a .cm-changedText,
.cm-deletedChunk .cm-deletedText {
  background: #eac3cc;
}
.cm-changeGutter {
  width: 100%;
}
.cm-changeGutter {
  position: absolute;
  left: 0;
  z-index: -1;
}
.cm-merge-b .cm-changedLineGutter {
  background: #ddfbe6;
}
.cm-merge-a .cm-changedLineGutter,
.cm-deletedLineGutter {
  background: #f9d7dc;
}
.cm-merge-a .cm-changedLine,
.cm-deletedChunk {
  background: #fbe9eb;
}
.cm-merge-b .cm-changedLine {
  background: #ecfdf0;
}
.cm-line {
  padding: 2px 2px 0 6px;
  padding-left: 40px;
  position: relative;
  font-size: 12px;
}
.cm-merge-a .cm-changedLine::before {
  content: "-";
  display: inline-block;
  position: absolute;
  left: 10px;
  color: #9bb0a1;
}

.cm-merge-b .cm-changedLine::before {
  content: "+";
  display: inline-block;
  position: absolute;
  left: 10px;
  color: #9bb0a1;
}
.cm-lineNumbers .cm-gutterElement {
  /* padding: 2px 3px 0 5px; */
  color: rgba(0, 0, 0, 0.3);
}
.cm-merge-revert {
  display: none;
}
.cm-gutters {
  padding-left: 30px;
}
.cm-content {
  padding: 0;
}
</style>

效果如下：

image.png