语法高亮在 IDE 中究竟是如何工作的？
How exactly does Syntax Highlighting work in IDEs?
我正在使用 React 在 Electron 中编写自己的文本编辑器，我尝试做一些基本的语法高亮显示。用户在 textarea 中编写代码，但无法在 textarea 中插入标记，所以我不能那样给文本着色。
我发现 this jquery plugin 在 textarea 后面添加了一个背景，所以我们可以在某些地方放置背景颜色，但是我希望文本本身是彩色的（这不能完成，因为 textarea 在背景前）。
关于 Visual Studio 代码（也是用 electron 编写的）等其他 IDE 是如何做到这一点的？
这里有多种方法。
一种方法是使用带有 contenteditable="true" 属性的 div 而不是文本区域。这样，您既可以在元素内编写文本，也可以为其内容设置样式。当然，这会产生自己必须处理的问题 - 何时解析代码，如何重新定位插入符等等。根据方法的不同，MutationObserver 可能会派上用场。
另一种方法是完全不使用任何内置的书写功能并实现您自己的功能。监听键盘事件并以编程方式插入字符。在那种情况下，您还需要实现自己的插入符号、选择等，这并不容易。
VS Code 是开源的，因此您实际上可以深入了解编辑器是如何制作的。他们使用名为 Monaco 的完全定制的编辑器，但其源代码位于 VS Code 存储库中。 This file is a good start.
我正在使用 React 在 Electron 中编写自己的文本编辑器，我尝试做一些基本的语法高亮显示。用户在 textarea 中编写代码，但无法在 textarea 中插入标记，所以我不能那样给文本着色。
我发现 this jquery plugin 在 textarea 后面添加了一个背景，所以我们可以在某些地方放置背景颜色，但是我希望文本本身是彩色的（这不能完成，因为 textarea 在背景前）。
关于 Visual Studio 代码（也是用 electron 编写的）等其他 IDE 是如何做到这一点的？
这里有多种方法。
一种方法是使用带有 contenteditable="true" 属性的 div 而不是文本区域。这样，您既可以在元素内编写文本，也可以为其内容设置样式。当然，这会产生自己必须处理的问题 - 何时解析代码，如何重新定位插入符等等。根据方法的不同，MutationObserver 可能会派上用场。
另一种方法是完全不使用任何内置的书写功能并实现您自己的功能。监听键盘事件并以编程方式插入字符。在那种情况下，您还需要实现自己的插入符号、选择等，这并不容易。
VS Code 是开源的，因此您实际上可以深入了解编辑器是如何制作的。他们使用名为 Monaco 的完全定制的编辑器，但其源代码位于 VS Code 存储库中。 This file is a good start.