在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）

最新推荐文章于 2024-08-06 22:42:31 发布

置顶

mySpringandhibernate

最新推荐文章于 2024-08-06 22:42:31 发布

阅读量3w

点赞数 8

分类专栏： vue使用codemirror实现代码编辑器文章标签： vue codemirror 代码高亮显示代码自动提示

本文链接：https://blog.csdn.net/mySpringandhibernate/article/details/84105095

版权

本文介绍了如何在Vue项目中使用codemirror插件来实现代码编辑器功能，详细步骤包括通过npm安装依赖，添加相应代码到页面，并展示了效果，轻松实现代码高亮和自动提示。

摘要由CSDN通过智能技术生成

在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）

1、使用npm安装依赖

npm install --save codemirror;

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

<template>
  <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea>
</template>

<script>
  import "codemirror/theme/ambiance.css";
  import "codemirror/lib/codemirror.css";
  import "codemirror/addon/hint/show-hint.css";

  let CodeMirror = require