vue 代码高亮插件全面对比测评

全面对比

从活跃方面来看

从功能方面来看

代码高亮是必须的，社区必须活跃，不然修复bug没有一点点参考，太费时间。自动补全缩进，快捷键操作，搜索和替换等功能不是必须的，如果有，能拿来装逼当然最好，不能也不影响使用。

故而挑出了以下几个，再具体分析，逐个调查，查看后续开发，部署的坑，坑少方便的就被我选中。

深入对比

1，ace

Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。

点击查看官网

2，codemirror

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示，丰富的api和可扩展功能以及多个主题样式，能满足您各种项目的需求。

CodeMirror支持大量语言的语法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。

CodeMirror采用MIT开源许可协议，目前已经被集成到各种应用程序中，如Adobe Brackets、CoDev、Light Table等开发环境，还被作为各种SQL、Haxe、JavaScript在线编辑器的基础库来使用。

点击查看官网

3，monaco

Monaco Editor是为VS Code提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块。

4，结论

总的来说，这三者功能都挺强的，那通过其缺点来挑选一款来使用吧，

ace，没有代码对比的功能，这不行啊，还要做各版本代码差异对比呢，出局。（我找了找，发现有ace-diff这个插件，可以实现代码差异对比。出局主要是因为我看见打包会有个坑，ace部署失败主要原因是不支持webpack打包，ace在本地搭建完成后，会有一个小型的worker帮助我们对内容进行渲染，webpack打包之后就变成完完全全的静态资源了，动态渲染的效果也就没了，虽然按找官网的意思是可以支持的，但是某博主实践了很多方法，均以失败告终。）

codemirror，其用户交互效果差些，很多东西需要自己拓展来实现其效果，学习这些拓展肯定是需要花时间来犯错的。其多文件的引入方式带来一定的管理不方便以及浏览器端的网络性能影响。

monaco，微软的VSCode用的和其通用了很多核心模块，凭借成熟可靠的产品，用户交互逻辑最好，原生Visual Studio主题，代码差异对比效果也最好。引入文件量巨大，瞅了一眼，大概70多M，引入方式兼容性不太好，打包容易出问题（大部分问题可通过monaco-editor-webpack-plugin插件打包解决）。移动浏览器或移动Web框架不支持Monaco编辑器。demo真的少，官网都没有，官网很好看的做了本英文参考书，有种英文字典的感觉，密密麻麻罗列了一堆属性，就是不知道从哪开始动手，怎么拼接这些成为demo。

以上就是vue 代码高亮插件全面对比测评的详细内容，更多关于vue 代码高亮插件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue使用showdown并实现代码区域高亮的示例代码

    前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能. 注:下面安装及使用方式是基于vue进行滴. 1.安装showdown npm install showdown --save 2.将showdown引入到使用的页面中 <template> <div v-html="htms"></div> </template> <script>

  • vue2实现搜索结果中的搜索关键字高亮的代码

    vue2实现搜索结果中的搜索关键字高亮的代码

    具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用

  • vue使用原生js实现滚动页面跟踪导航高亮的示例代码

    需要使用vue做一个专题页面.滚动页面指定区域导航高亮. 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class. html结构 main.vue <template> <div class="qz-hom

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • vue 使用monaco实现代码高亮

    vue 使用monaco实现代码高亮

    使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各不同语言,而且支持关键字补全,还要有一个各不同版本间的代码左右比较,这就是需求. 至于为什么选中monaco,请查看 vue(element)中代码高亮插件全面对比 好了,现在正式开工吧! 首先需要下载monaco-editor组件,monaco-editor-webpack-plugin组件 npm install monaco-editor npm install monaco-e

  • vue 代码高亮插件全面对比测评

    vue 代码高亮插件全面对比测评

    全面对比 从活跃方面来看 从功能方面来看 代码高亮是必须的,社区必须活跃,不然修复bug没有一点点参考,太费时间.自动补全缩进,快捷键操作,搜索和替换等功能不是必须的,如果有,能拿来装逼当然最好,不能也不影响使用. 故而挑出了以下几个,再具体分析,逐个调查,查看后续开发,部署的坑,坑少方便的就被我选中. 深入对比 1,ace Ace是一个用JavaScript编写的嵌入式代码编辑器.它与Sublime,Vim和TextMate等原生编辑器的功能和性能相匹配.它可以很容易地嵌入到任何网页和Java

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • ckeditor syntaxhighlighter代码高亮插件配置分享

    ckeditor syntaxhighlighter代码高亮插件配置分享

    最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

  • 2014最热门的JavaScript代码高亮插件推荐

    2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

  • highlight.js 代码高亮插件的使用详解

    highlight.js 代码高亮插件的使用详解

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j

  • CKEditor中加入syntaxhighlighter代码高亮插件

    从官网 下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin

  • FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

    FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

    Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh

  • Live Write 的代码高亮插件 Paste Code

    Live Write 的代码高亮插件 Paste Code

    然后用了一下VSPaste(原作者网站已经找不到了),感觉代码显示不爽.也用了CodePoste(呵呵,也是看网上找到的),这个感觉还不错的说,不过行数的显示让我觉得有些不爽.本来还想参考一下他的代码的,结果加密了,哈哈. 没办法,只有自己找找资料,自己写一个了.分析了一下,这个插件的难点主要在RTF格式转HTML,以我这么烂的技术是写不出来的.于是在网上找了一个(http://www.codeproject.com/KB/recipes/RtfConverter.aspx),用了几天的时候,写

  • asp.net 为FCKeditor开发代码高亮插件实现代码

    asp.net 为FCKeditor开发代码高亮插件实现代码

    所以就为FCKeditor写了个InsertCode的插件.整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官网的文档: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins 首先,我们在FCKeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件. 在新建的fckpl

  • ckeditor syntaxhighlighter代码高亮插件，完美修复

    ckeditor syntaxhighlighter代码高亮插件，完美修复

    CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵 来个图 使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C

随机推荐