ace.js的代码高亮和自定义提示代码补全

哈喽!!!大家好,我是珊妹儿,首先要说的是疫情特殊期间,仍然奋斗在工作岗位上的程序员们,大家辛苦啦~~~

珊妹儿现在是真正从后端程序媛转成了一名前端程序媛,最近新入职一家公司,岗位是前端开发,第一天就接到一个以前从没听过的前端技术,那就是ACE~,珊妹儿刚接触这个词汇的时候,真的是一脸懵,从来没听过呢-_-......老大给了我一些学习资料,让我研究一天然后写出个demo,在这一天珊妹儿看的源代码看的真是头疼呀,一上午毫无头绪,然后问了问一些前端的朋友,可是大家都没听过ace这个技术(可能是个古董技术吧),真的是孤立无援的感觉,甚至珊妹儿都怀疑自己转前端到底是不是个正确的选择了,最后的研究过程中还是珊妹儿的哥哥一语中的(悄悄告诉你们,珊妹儿的哥哥嫂子都是程序员哦~),才弄明白了点这个东西,但是百度ace了解到,这可是个不错的代码编辑器呢,可以嵌入到网页中的,让人感觉很是强大,那我们就来学习下吧!

我在百度进入的ace官网好像啥也显示不出来呀,这里珊妹儿给大家提供资料啦,这里是官网的内容,可以对ace的使用有一些认识和了解,方便我们去使用它,

链接: https://pan.baidu.com/s/1js2LpzQ0pCC0ZciLrTBeXQ    提取码: rre1  下载后里面有ace.js和 ext-language_tools.js文件,大家可以直接用,另外说下,解压后的ace-builds文件下有min版本,是精简后的,内存占用较少,封装组件的话可以使用min版的哦,对于自定义补齐代码的功能,珊妹儿这里参考了一个不错的文章,大家也可以看看https://www.cnblogs.com/zhongxia/p/5650199.html,珊妹儿直接在解压后的ace同级目录创建了一个html文件,大家可以直接复制过去运行看看,代码及讲解如下:

<!DOCTYPE html>

<html lang="en">

<head>

<title>ACE in Action</title>

<!--导入js库-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">

    #editor { 

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

    }

</style>

</head>

<body>

 

<div id="editor">function foo(items) {

    var x = "All this is syntax highlighted";

    return x;

}</div>

    

<script src="./ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<script>

    var editor = ace.edit("editor"); //实例化ace

    editor.setTheme("ace/theme/monokai"); //这里是设置代码编辑器的主题,听说ace包含24个主题呢

    editor.session.setMode("ace/mode/javascript");//这里是设置代码编辑器按哪种语言显示代码高亮,听说ace支持45种语言呢

    //启用提示菜单

    ace.require("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/language_tools");

    editor.setOptions({

        enableBasicAutocompletion: true,

        enableSnippets: true,

        enableLiveAutocompletion: true

    });

    //自定义补全

    var languageTools = ace.require("ace/ext/language_tools");

    languageTools.addCompleter({

    getCompletions: function(editor, session, pos, prefix, callback) {

        callback(null,  [

            {

                name : "第一行", //名称

                value : "Select",//值,这就是匹配我们输入的内容,比如输入s或者select,这一行就会出现在提示框里,可根据自己需求修改,就是你想输入什么显示出北京呢,就改成什么

                caption: "北京",//字幕,下拉提示左侧内容,这也就是我们输入前缀匹配出来的内容,所以这里必须包含我们的前缀

                meta: "", //类型,下拉提示右侧内容

                type: "local",//可写为keyword

                score : 1000 // 让它排在最上面,类似权值的概念

            }

        ]);

    }

    });

</script>

</body>

</html>

另外的参考链接(如果上面的参考内容还不足以满足你~):https://blog.csdn.net/kongxingxing/article/details/98481023?depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromBaidu-2

对于ace的学习,珊妹儿今天的分享就到这里,有什么问题欢迎留言哈,对了,珊妹儿是刚刚转入前端开发,不懂的地方还很多,如果有前端同学想要互相学习交流的可以私信哈~  

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值