JS代码高亮编辑器 ace.js

JS代码高亮编辑器 ace.js

字数254 阅读2 评论0 喜欢0

瞎扯

ace 是 js 实现的代码编辑器

编译打包之后的 ACE 代码

官网,未提供编译好的文件

ACE 拥有的特点

  1. 语法高亮超过110种语言
  2. 超过20个主题
  3. 自动缩进
  4. 减少缩进
  5. 一个可选的命令行处理庞大的文件（400万线似乎是极限！）
  6. 完全自定义的键绑定，包括vim和Emacs模式
  7. 用正则表达式的搜索和替换
  8. 突出显示匹配的括号
  9. 软标签和实际标签之间切换
  10. 显示隐藏字符
  11. 使用鼠标拖放文本
  12. 换行
  13. 代码折叠
  14. 多个光标和选择
  15. 现场语法检查器
  16. 剪切，复制和粘贴功能
  17. 代码提示
下载下来的代码, demo/autocompletion.html, demo中 智能提示是 需要按快捷键才会出来的,配置如下
 enableLiveAutocompletion: false
把这个配置改成 true ,则 输入字母就会出现提示

Paste_Image.png

智能代码提示的效果截图:

时间： 2024-10-23 19:47:07

JS代码高亮编辑器 ace.js的相关文章

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

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

最好用的web端代码文本编辑器ACE

使用足够简单,功能足够强大,体验足够优秀 之前有一个系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,总共发了四篇文章介绍了三个非常棒的插件,分别是bootstrap-duallistbox.select2和datatables,今天再更此系列,让好东西让更多的人知道,受益! 本次介绍ace.js,这是一个用JavaScript编写的独立代码编辑器.支持超过120种语言的语法高亮,超过20个不同风格的主题,同时还支持实时语法检查,自定义快捷键绑定,代码折叠,搜索替换,自动缩进等等功能

代码高亮插件——wangHightLighter.js——demo演示

wangHighLighter demo 语言:   主题: 转换 说明: wangHightLighter.js是一个可以将代码高亮显示的javascript小插件,支持常用的20多语言.多个漂亮的主题.代码开源. 使用说明 & 下载:https://github.com/wangfupeng1988/wangHighLighter ---------------------------------------------------------------------------------

正则匹配js代码高亮

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> /* 高亮样式 */ * { font-size: 16px; font-family: microsoft yahei; } pre { word-break: break-all; word-wrap

修改博客园markdown编辑器代码高亮风格的方法

???????作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式可供我们开箱即用.Highlightjs就是这样一款产品. ???????下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的. 第一步,找到你所喜欢的高亮主题 ???????打开Hightlightjs的demo页面 选择你所喜欢的高亮主题.我选择的是Atom One

gulp打包压缩js代码

这是一个小demo,实现的功能如下: 1.在js代码打包很多的js文件,我们需要控制某些个别js件必须在前面.这里做到了简单的实现. 2.实现合并成一个js文件. 3.实现压缩成一行,即生成*.min.js. 一,首先看下目录结构 其中main.js模拟了最重要的一个js文件,在页面上应该首先需要加载的js.文件. 我们把不需要考虑顺序的文件放在了js文件夹下.main.js a.js b.js 里面几句简单的代码.大家可以下载demo文件查看. gulpfile.js package.json

在JSP中的java代码中调用js代码

out.println(str)方法就是在JSP服务端运行的时候把str输出到服务端返回给客户端的HTML页面 可以通过out.print()这种方式输出一段JS代码,这段JS代码先声明一个JS函数,声明结束后再调用一下这个方法. 例如: out.println("<script>function showMessage() {alert('set_afterlogin()');}</script>");//声明showMessage方法 out.println

JS代码预解析原理、函数相关、面向对象

JS重要知识点 这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************//*JS代码预解析.变量作

JS代码预解析原理

/* JS代码预解析.变量作用域.作用域链等 应该能作为学习JS语言的入门必备知识.下边给出些简要解释和一些典型的代码段,若要了解更多,能从网上搜索到更多相关示例. 引用网上的一段有关 "JS的执行顺序" 的解释:如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件),它们的运行顺序是:步骤1. 读入第一个代码段(js执行引擎并非一行一行地执行程序,而是一段一段地分析执行的)步骤2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤