背景

我们有时候需要在项目中引用代码编辑器,那么你知道有哪些库可以支持嘛?

monaco-editor

monaco-editor是强大的代码编辑器,它可以支持多种语言语法的高亮,目前使用者非常广泛,基本上大部分企业项目都是使用的它,值得一提的是vscode就是基于它进行开发的。

如果你是vue的开发者你可以下载vue-monaco-editor,如果你是react的开发者,你可以下载react-monaco-editor进行使用。

初学者必踩的坑就是如何配置代码高亮,首先无论你是vue还是react,你都需要安装一个插件作为支持:monaco-editor-webpack-plugin,然后vue的话在vue.config.js中进行配置,react的话需要另外下载一个插件叫customize-cra,使用它重写cra,然后在启动命令修改为react-app-rewired xxx就可以了。

codeMirror

codeMirror也是一个不错的在线代码编辑器,目前使用的网站也比较多,比如菜鸟教程的在线代码编辑器就是使用codeMirror进行制作的。网上有很多codeMirror的教程,可以自行搜索

prism-editor

prism-editor是基于prismjs进行开发的,prismjs是功能强大的高亮代码块的库,目前CSDN正在使用这个库,用来博客代码块的展示。这个库原本是不支持编辑器输入的,只是为了展示高亮代码,但是由于prism提供的主题包非常好看(就像CSDN大会员有各种绚丽的代码块一样),很多开发者在源码上进行二次开发制作出了一款可输入的高亮代码块,也就是我们说的代码编辑器了

以上就分享几个常用的库,可以实现高亮代码的需求,大家感兴趣的话可以自行百度详细了解这些库的使用

JavaScript在线代码编辑器-技术选型相关推荐

  1. 在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎

    CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...

  2. au如何关闭预览编辑器_在线IDE开发入门之从零实现一个在线代码编辑器

    前言 3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写.运行和调试代码,它可以直接运行在浏览器中,也就是传说中的 Web IDE.3年后的今天随着国内云计算的 ...

  3. 程序员最爱用的在线代码编辑器合集,哪款是你的最爱?

    程序员最爱用的在线(在线IDE)分享合集,有没有你最爱用的? TitanIDE 首当其冲,TitanIDE(云原生集成开发环境),打开浏览器即可编码,快捷方便,最主要的优势概括为以下几点: 1.多内核 ...

  4. 基于浏览器的在线代码编辑器

    1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等.   马上使用 2. Dabbl ...

  5. 在线代码编辑器:Monaco Editor

    monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...

  6. CodeMirror 5.26.0 发布,在线代码编辑器

    CodeMirror 5.26.0 已发布,CodeMirror 是一款"Online Source Editor",基于 Javascript,短小精悍,实时在线代码高亮显示,它 ...

  7. Codemirror-开源在线代码编辑器

    Codemirror是一款"Online Source Editor",基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎 ...

  8. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定...

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  9. WebRTC与Ace在线代码编辑器合作,实现实时协作编程

    为什么80%的码农都做不了架构师?>>>    日期:2013-5-17  来源:GBin1.com 距离WebRTC真正的应用到一些很酷的应用中还有一段时日,但是即便是这样,很多开 ...

  10. CodeMirror 多功能在线代码编辑器

    CodeMirror 是一款允许在浏览器中使用的多功能文本编辑器,专用于编辑代码,并附带超过 100 种语言模式和各种插件,可实现高级的代码编辑功能,包括代码高亮显示.功能扩展以及多个主题样式 Cod ...

最新文章

  1. IBM X3650 WIN2003安装详细方法
  2. 追踪源码自定义负载均衡策略
  3. 2018年12月2526日
  4. kali Linux/centos7 Linux设置不会屏保
  5. 2021-04-05
  6. Jackson使用:String 与对象互转、Jackson 从 json 字符串转换出对象
  7. JeecgBoot轻松解决ERP项目复杂布局需求,JVXETable高性能行表格效果和项目案例
  8. optimize table优化mysql例子
  9. linux自定义开机启动服务和chkconfig使用方法
  10. React-Native 按钮点击几种效果进行对比
  11. Matplotlib 三维图像 入门
  12. Spring MVC拦截器(Interceptor)的配置及使用
  13. graphics2d 乱码 java_java Graphics2D绘制文字并居中并解决服务器乱码问题
  14. PostgreSQL常用查看命令
  15. Tomcat乱码情况完美解决
  16. c#SQL参数化查询自动生成SqlParameter列表
  17. android logo颜色渐变,2018,很多APP的logo渐变了 -- 渐变色教程
  18. 帆软报表参数传给网络报表_报表开发工具FineReport的使用: 程序网络报表
  19. 简易硬盘服务器,低成本个人服务器搭建 篇四:一机多用~Server2012的简单备份方法廉价版Time Capsule的养成之路...
  20. wlop一张多少钱_回答:小白有个问题,为什么很多人都说 WLOP鬼刀 的画不够好?...

热门文章

  1. FPGA图像处理 —— fpga实现cameralink接口图像传输
  2. 写给喜欢单片机的初学者
  3. Flash退出历史舞台后,Web端3D会迎来怎样的发展?
  4. php201534,PHP设计聊天室步步通4
  5. 命令改计算机用户名和密码,利用NET命令添加、修改用户账户信息
  6. 一级计算机考试试题评分标准,2014计算机一级上机试题(1—5套)评分标准
  7. 数据库信息泄漏 不可忽视的安全短板
  8. MATLAB2020b下载和安装
  9. 常用DOS命令参数的中文详解3
  10. android 文件隐藏文件,安卓手机里的文件怎么隐藏?安卓手机隐藏文件夹的方法