ABAP的语法高亮是怎么在浏览器里显示的

共计 1185 个字符，预计需要花费 3 分钟才能阅读完成。

本篇内容介绍了“ABAP 的语法高亮是怎么在浏览器里显示的”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让丸趣 TV 小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

br font-size:16px;white-space:normal;background-color:#FFFFFF; /

你也许会问，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.

“ABAP 的语法高亮是怎么在浏览器里显示的”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注丸趣 TV 网站，丸趣 TV 小编将为大家输出更多高质量的实用文章！