问题描述
我正在开发一个React应用，其中包括在用户端编写代码。因此，语法高亮会很可爱。问题在于所讨论的语法是非标准的语法-没有程序包会内置该语法。
我已经看了一段时间了，很幸运没有任何标准软件包可以导入自定义语言。因此，如果有人可以推荐一个可以轻松做到这一点的程序包，我将不胜感激。其他选择是建立自己的。这是合理的，因为我只需要很少的实际高光/颜色（而且无论如何我都必须写那一部分）。
在那种情况下，我不太了解这些不同组件的工作方式。我看到他们倾向于使用包含span元素等类似文字区域的pre标签。 textarea是否以某种方式用于实际键入，但是可能被隐藏了？这就是在文本框中创建带格式文本的错觉的样子。维护用于解释的干净副本，以及用于显示的格式化副本。
但是我不知道实现这项工作的实际结构是什么。为什么pre区域隐藏了文本框？那就是正在发生的事吗？是以某种方式更改它，还是只是匹配它？
如果了解这些内容的任何人都可以提供有关JS语法荧光笔如何工作以及HTML结构的高级概念，那可能足以告诉我如何构建它。
谢谢。
解决方法
高级概念的简要说明如下：
大多数代码编辑器都不使用textarea来显示实际的代码，因为无法将细粒度的语法突出显示应用于textarea。
隐藏的文本区域是“只写”的，它仅用作输入事件捕获器。代码文本（也称为View）的显示将在以后重新构建。
文本字符串存储在幕后的某个内部DocumentModel中，这可能被他们称为。此处完成了大量繁重的工作，例如光标跟踪或单词分段。但最重要的是令牌化。
因此发生令牌化。这是识别并理解代码中每个元素的过程。想想很多正则表达式匹配。在将过程代码文本拆分为多个片段并分别标记其令牌类型后，例如variable，parameter，number等。
然后根据标记化结果呈现View的代码。每个片段都以<span class="variable">code here</span>之类的形式呈现，CSS会相应地为其着色。当然，整个内容很可能都包裹在<pre>标签中。