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
