专栏首页jQuery每日经典【ace.js】网页版代码智能提示,带高亮编辑器

【ace.js】网页版代码智能提示,带高亮编辑器

背景

纯粹为了在自己博客实现一个代码编辑器,方便在线测试各种代码。

ace介绍

ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。到目前版本,它支持了超过120多种的语法高亮,超过20多种主题等,在编辑器方面也支持多种操作,包括提示等,算是一个基于web端的代码编辑器了。,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。详细API和demo可查阅官网。

步骤

1.编写代码编辑器样式

2.引入ace.js

<script type="text/javascript" src="./src-noconflict/ace.js"></script>
<script type="text/javascript" src="./src-noconflict/ext-language_tools.js"></script>

3.具体示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css" media="screen">
        .ace_editor {
            /*position: relative !important;*/
            border: 1px solid lightgray;
            border-radius:5px;
            margin: auto;
            height: 800px;
            width: 80%;
        }
    </style>
</head>
<body>
<div id="editor"></div>
<script src="ace-builds-master/src/ace.js"></script>
<script src="ace-builds-master/src-noconflict/ext-language_tools.js"></script>
<script>
    //引入语言工具
    ace.require("ace/ext/language_tools");
    const editor = ace.edit("editor");
    //选择主题
    editor.setTheme("ace/theme/twilight");
    //选择语言
    editor.session.setMode("ace/mode/javascript");
    //各项设置
    editor.setOptions({
        enableBasicAutoCompletion : true,
        enableSnippets : true,
        enableLiveAutocompletion : true
    });

    //预设值
    if (typeof ace == "undefined" && typeof require == "undefined") {
        document.body.innerHTML = "<p style='padding: 20px 50px;'>couldn't find ace.js file, <br>"
            + "to build it run <code>node Makefile.dryice.js full<code>"
    } else if (typeof ace == "undefined" && typeof require != "undefined") {
        require(["ace/ace"], setValue)
    } else {
        require = ace.require;
        setValue()
    }

    function setValue() {
        require("ace/lib/net").get(document.baseURI, function(t){
            var el = document.getElementById("editor");
            el.env.editor.setValue(t, 1);
        })
    }
</script>
</body>
</html>

4. 效果展示

本文分享自微信公众号 - jQuery每日经典(wape14)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 超强的前端工具,在线绘制各种图形-mxGraph

    mxGraph是一个强大的JavaScript流程图前端库, 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 程图、图表、网络图和普通图形的...

    用户7293182
  • html5+CSS3+JS实现七夕言情功能代码

    因为今天2月14日是情人节,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的情人节特效,具体实例代码,...

    用户7293182
  • 在 jQuery Mobile 中使用 UI 组件

    jQuery Mobile JavaScript 库是一种强大的方式,允许用户通过 Web 浏览器直接连接到触摸友好的应用程序,从而让移动和平板设备可以访问移动...

    用户7293182
  • Docker最全教程——从理论到实战(六)

    托管到腾讯云容器服务,我们的公众号“magiccodes”已经发布了相关的录屏教程,大家可以结合本篇教程一起查阅。

    雪雁-心莱科技
  • 9月容器产品技术月报 | 腾讯云原生专题上线啦

    ? 2020年9月 ? ? VOL:05 ? ? ? ? 容器产品新特性 9月上新 ? ? 腾讯云边缘服务TKE Edge 从中心云管理边缘云资源的容器系统 ...

    腾讯云原生
  • 《TKE学习》TKE简介(一)

    腾讯云容器服务(Tencent Kubernetes Engine,TKE)是高度可扩展的高性能容器管理服务,您可以在托管的云服务器实例集群上轻松运行应用程序。...

    baron
  • 大数据告诉你今年有多热:北京高温创36年新高

    7月12日,北京在持续的高温黄色预警中强势入伏。热!热!热!大家普遍反映今年北京天气太热,热得早、热得猛,以至于朋友之间最关心的话都变成了“哪儿凉快哪儿呆着去”...

    BestSDK
  • 3. call PRXSUBSTR () | 庖丁解牛切割数据!

    【SAS Says·扩展篇】庖丁解牛割数据! | 3. call PRXSUBSTR () 0. 前集回顾 1. 新的问题 2. 初识 PRXSUBSTR() ...

    数说君
  • Cache模拟器(CacheSim)

    最近写了一个Cache的模拟器,由于平时空余时间比较分散,前前后后用了一周多的时间,基本实现的Cache的模拟功能(通过读取trace文件得到相应的命中率),能...

    用户1221057
  • 如何在Linux上获得错误段的核心转储

    今天小编要跟大家分享的文章是关于Linux上错误段的核心转储问题。喜欢Linux操作系统,对Linux感兴趣的小伙伴快来看一看吧,希望通过本篇文章能够有所收获。

    小小科

扫码关注云+社区

领取腾讯云代金券