这篇文章的原文我发表在SAP官方社区上：https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-webide-launched-via-browser/

在S/4HANA里，我们现在能在浏览器里写ABAP了，并且支持语法高亮。

你也许会问，ABAP的语法高亮是如何在浏览器里显示的？下面跟我一起来通过调试的方式自己找到问题的答案。

(1). 在浏览器里敲个ABAP的关键字，比如data。发现被高亮了。通过Chrome开发工具发现高亮是通过一个叫ace_keyword的css类实现的。

在Chrome开发工具里以关键字".ace_keyword"搜索: 发现这个css类是硬编码在theme-sap-cumulus.js里的。

(2). 现在需要找到浏览器里进行ABAP代码编辑的编辑器的实现。在Chrome开发工具里Network tab里输入“.xml”作为过滤条件，于是找到编辑器的Fiori实现: Editor.view.xml

具体的编辑器是实现在命名空间reuse的ABAPWrapper标签里。

根据这个命名空间找到实现ABAP编辑器的UI5应用，如下图: nw_aps_ext_lib.

打开ABAPWrapper-dbg.js, 在第68行设置断点。这个函数负责从ABAP后台取PAD文件，该文件和语法高亮有关。

刷新ABAP编辑器页面，断点触发，在调试器里观察PAD文件的内容:

所有的ABAP关键字都列在该PAD文件里，这样UI5就知道编辑器里哪些字符串应该做高亮显示。

(3). 最后一个问题就是，比如当我敲了一个ABAP关键字"new"之后，UI5应用具体哪行代码将对应的css类加到这个字符串对应的DOM节点上？

如下图，一旦我敲了一个字符w之后，字符串new作为一个关键字需要被高亮：

具体逻辑如下图：一旦敲入字符"w"后，onInput作为事件处理函数触发:

函数$renderLine负责生成对应的HTML源代码。输入字符"new"被传入函数getLineTokens来计算该字符串是关键字还是普通变量。

在文件AceRndTokenizer.js里, ABAP解析器按照我们期望的将“new”解析成关键字，因为解析器拥有PAD文件的引用，因此它知道哪些字符串是关键字，哪些是普通变量。

(4). DOM节点的源代码在此处生成，"ace"和“keyword"做连接操作，生成最后我们在Chrome开发工具里看到的完整css类ace_keyword.

谜底就这样揭晓了。
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

ABAP的语法高亮是如何在浏览器里显示的的更多相关文章

  1. ABAP开发环境语法高亮的那些事儿

    关于SAP ABAP开发环境,Jerry之前写过几篇公众号文章: 那些年我用过的SAP IDE 不喜欢SAP GUI?那试试用Eclipse进行ABAP开发吧 使用Visual Studio Code ...

  2. Qt之QSS（语法高亮）

    简述 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,例如:编程语言.标记语言,这些语言的语法错误显示是有区别的. 简述 详细 ...

  3. ABAP Development Tools的语法高亮实现原理

    ABAP Development Tools的前端是Java,根本识别不了ABAP.那么在ADT里的ABAP语法高亮是如何实现的? 第一次打开一个report时,显示在ADT里的代码是没有任何语法高亮 ...

  4. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

  5. Sublog: 支持Markdown和语法高亮的跨平台博客客户端

    灵感来自米米饭 功能一览 为什么你应该试试用Sublog写博客 项目主页: sublog 使用方法: 本项目是一个插件,首先要安装Sublime Text 2 重命名sublog.sublime-se ...

  6. 我是如何给discuz模板做语法高亮的

    本人一直做ASP.NET开发,近期接到任务要用Discuz开发一个社区,第一次接触PHP,PHP灵活的语法,天生的模块化,各种语法糖深深的震惊了我,我从内心深处感受到了PHP是最牛逼的语言!!! 好了 ...

  7. 使用Scribefire在博客中插入语法高亮

    效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...

  8. django如何语法高亮模块

    首先,django的语法高亮必须配合markdown模块使用. 注意事项: 确保在渲染文本时添加了 markdown.extensions.codehilite 拓展 确保安装了 Pygments. ...

  9. 我是如何给discuz模板做语法高亮的/vs code/textmate

    本人一直做ASP.NET开发,近期接到任务要用Discuz开发一个社区,第一次接触PHP,PHP灵活的语法,天生的模块化,各种语法糖深深的震惊了我,我从内心深处感受到了PHP是最牛逼的语言!!! 好了 ...

随机推荐

  1. [转] node.js如何获取时间戳与时间差

    [From] http://www.jb51.net/article/89767.htm Nodejs中获取时间戳的方法有很多种,例如: 1.new Date().getTime()  2.Date. ...

  2. PostgreSQL精简命令:

    dos命令行连接PostgreSQL: . 接入PostgreSQL数据库: psql -h IP地址 -p 端口 -U 用户名 -d 数据库名 . 输入数据库密码 C:\Users\admin\De ...

  3. 第四次 Scrum Meeting

    第四次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/8 22:00 30min 大运村1号楼3F 附Github仓库:WEDO 例会照片 工作情况总结(4.8) ...

  4. IE9以下程序开发不兼容项目罗列

    1. 提前关闭iframe,脚本将不再执行 IE下的js不是缓存在站点系统中,而是缓存在每个单独页面系统中的,当关闭页面,对应引入的脚本将不再执行. 可能出现两种情况: iframe引入的html页面 ...

  5. Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  6. ORACLE--12C--创建PDB

    一,关于创建介绍 1,介绍 CDB支持多种创建PDB的技术.默认CBD会有一个PDB$SEED 创建的PDB自动包括完整数据字典,包括元数据和CDB根目录中系统提供的对象的内部链接.您必须从单个根定义 ...

  7. matlab中如何根据t检验参数查找t检验值

    这个问题花了一些时间.先看图 这个是t检验里面的公式,但是如何在matlab中找到该式子对应的值,我现在才知道. 就是这样:x=tinv(1-α/2,n-1)----t(n)分布的上侧α分位数     ...

  8. C# 获取字符串长度

    int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;

  9. C#使用第三方组件Epplus操作Excel表

    Epplus操作Excel基础详解 1.什么是Epplus Epplus是一个使用Open Office XML文件格式,能读写Excel2007/2010文件的开源组件,在导出Excel的时候不需要 ...

  10. MVC页面简单post提交

    页面代码 <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(funct ...