vue3中使用vue-codemirror(在线代码编辑器)

最近在做一个功能，需要在vue3中显示相关的代码。不想使用monaco这种重量选手，所以找到vue-codemirror这个轻量选手。记录下相关的内容，以备后续使用。

本文参考:前端插件库之vue3使用vue-codemirror插件_一只爱吃萝卜的小兔子的博客-CSDN博客_codemirror vue3

1. 第一步 安装vue-codemirror包

npm install vue-codemirror --save

2,如果你要是想切换主题，并且想用现在现成的dark 主题 请安装下面的两个包

npm i  @codemirror/lang-javascript
npm i  @codemirror/theme-one-dark
npm i  @codemirror/view

其实主题可以自定义 ，后面再说

3：新建组件mirrorTextArea.vue

<template>
    <!-- :indent-with-tab="true" 是否自动获取焦点-->
    <codemirror v-model="code" placeholder="Code gose here..." :style="{ height: '100%' }" :autofocus="true"
        :tabSize="2" :extensions="extensions" />
</template>

<script lang="ts" setup>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref } from "vue";
import { EditorView } from "@codemirror/view"

let myTheme = EditorView.theme({
    // 输入的字体颜色
    "&": {
        color: "#0052D9",
        backgroundColor: "#FFFFFF"
    },
    ".cm-content": {
        caretColor: "#0052D9",
    },
    // 激活背景色
    ".cm-activeLine": {
        backgroundColor: "#FAFAFA"
    },
    // 激活序列的背景色
    ".cm-activeLineGutter": {
        backgroundColor: "#FAFAFA"
    },
    //光标的颜色
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "#0052D9"
    },
    // 选中的状态
    "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#0052D9",
        color:'#FFFFFF'
    },
    // 左侧侧边栏的颜色
    ".cm-gutters": {
        backgroundColor: "#FFFFFF",
        color: "#ddd", //侧边栏文字颜色
        border: "none"
    }
}, { dark: true })
interface IProps {
    height?: string,
}
// 接受的参数
const props = withDefaults(defineProps<IProps>(), {
    height: '400px'
})
const code = ref(``);
const extensions = [javascript(), myTheme];
const Change = () => {

}
</script>

5：最后一步：在想要应用的地方应用这个组件即可