ace-editor 代码高亮对象表示法

Question

使用 Ace Editor 预打包版本并尝试向 Ace JavaScript 编辑器添加一些基本代码突出显示（自定义关键字）。

请不要过多阅读示例，这纯粹是为了避免post获取敏感数据的示例。

关键字示例：添加到 keywordMapper：

"options": "settings|options|global|user";

并在使用它的页面中添加了一些 css:

.ace-eclipse .ace_options {\
  color: rgb(255,20,147);\
}\

我想它只会突出显示关键字，这样我就可以得到这个（不突出显示点）：

但我尝试过的都没有用。我只能得到第一个（点前：'.'）匹配的单词。 “.settings”不匹配（你认为它会）。

我的想法是，我将根据之前的标记实现自动完成，例如输入 "settings." 以获得包含 "options"（和其他内容）的列表，单击选项并输入“.”获取包含 "global|user" 的列表，另一个“.”显示每个对象中的所有设置。

我已经使用这些规则进行了一些试验，但这已经够令人困惑了，我能得到的最接近的结果是它在突出显示点的情况下工作。

感谢任何帮助。

P.s。尝试了 ace 主站点上的 <![CDATA[ 示例，甚至无法让他们 post 工作的代码。

太混乱了，几乎没有任何文档！我忍不住认为这不会那么难，因为他们的网站上有很多 "real world users"。

谢谢。

Answer 1

keywordMapper 仅适用于关键字和顶级标识符。点之后的所有属性都在https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/mode/javascript_highlight_rules.js#L210中处理。所以你应该在它之前添加另一个规则：

        {
            token : "options",
            regex : "settings|options|global|user"
        },

但是对于自动补全，你真的不需要突出标记，你可以只使用它们的值，而不是类型。

ace-editor code highlight object notation