共計 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 小編將為大家輸出更多高質量的實用文章！