node.js - 语法高亮在 IDE 中究竟是如何工作的？

Question

我正在使用 React 在 Electron 中编写自己的文本编辑器，并尝试进行一些基本的语法突出显示。用户在 textarea 中编写他们的代码，但无法在 textarea 中插入标记，因此我无法以这种方式为文本着色。

我找到了这个 jquery 插件，它在 textarea 后面添加了一个背景，所以我们可以在某些地方放置背景颜色，但是我希望文本本身是彩色的（因为 textarea 在背景前面，所以不能这样做）。

关于其他 IDE（如 Visual Studio Code（也是用电子编写））如何实现这一点的任何想法？

标签： node.jselectronsyntax-highlighting

Answer 1

有多种方法可以在这里工作。

一种方法是使用带有contenteditable="true"属性的 div 而不是 textarea。这样，您既可以在元素内写入文本，也可以设置其内容的样式。当然，这会产生必须处理的自己的问题 - 何时解析代码，如何重新定位插入符号等等。根据方法的不同，MutationObserver 可能会派上用场。

另一种方法是根本不使用任何内置的编写功能并实现自己的。监听键盘事件并以编程方式插入字符。在这种情况下，您还需要实现自己的插入符号、选择等，这并不容易。

VS Code 是开源的，因此您实际上可以深入了解一下，看看编辑器是如何制作的。他们使用名为 Monaco 的完全定制的编辑器，但其源代码位于 VS Code 存储库中。这个文件是一个好的开始。