VuePress 使用了 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言,你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名

大家可以看到在这个成果图内，左边会有一个代码框，用来写代码，右边会实时的更新左边代码实现出来的内容。
在代码框内，会如同VScode等代码编译器一样，不同的关键字有不同的颜色，不会说是全都是黑色，就如同真正的代码编译器一样，而且左边会显示行数，选中会有选中的颜色。

那么我这是如何做到的呢

这是一个代码编译器的组件，他的官方网站在这里

setting.js里面包含了一些主题文件，我的是这样的

这里需要注意的是，如果你没指定文字左对齐，他的代码内容就会中间对齐，想更改的话，在他的容器的样式里面改就可以，比如

显示代码编辑器内的内容（iframe）

然后监听代码编辑器里面的内容，就是下图这个属性

然后将他的内容放到右边的容器内，就完成了

在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示：

1、使用npm安装依赖

2、在页面中放入如下代码

 mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
 //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
 

3、话不多说，直接上图

以上所述是小编给大家介绍的在vue项目中使用codemirror插件实现代码编辑器功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！