使用自定义语言在 React 应用程序中突出显示语法

Question

我正在开发一个 React 应用程序，其中包括在用户端编写代码。 所以，语法高亮会很可爱。 问题在于所讨论的语法是非标准的 - 没有包会内置它。

我已经研究了一段时间，但我很少有运气获得任何标准包来让我导入自定义语言。 因此，如果有人可以推荐一个可以轻松做到这一点的软件包，我将不胜感激。 另一种选择是构建我自己的。 这是合理的，因为我只需要非常少量的实际高光/颜色（无论如何我都必须编写该部分）。

在那种情况下，我真的不明白这些不同的组件是如何工作的。 我看到他们倾向于使用包含 span 元素等的 pre 标签以及 textarea。 不知何故，textarea 被用于实际打字，但可能被隐藏了？ 这就是它的样子，在文本框中创建格式化文本的错觉。 维护一份干净的副本以供解释，并保留一份格式化的副本以供展示。

但我不知道使这项工作的实际结构是什么。 为什么前置区域隐藏了文本框？ 这甚至是正在发生的事情吗？ 它是以某种方式改变它，还是只是匹配它？

如果任何了解这些事情的人都可以提供有关 JS 语法高亮器如何工作以及 HTML 结构的高级概念，那么这可能足以告诉我如何构建一个。

谢谢。

Answer 1

高级概念简要如下：

大多数代码编辑器不使用 textarea 来显示实际代码，因为不可能对 textarea 应用细粒度的语法高亮显示。

隐藏的文本区域是“只写”的，它仅用作输入事件捕获器。 代码文本的显示，也就是View ，将在稍后重建。

文本字符串存储在一些内部DocumentModel因为它们可能会调用它。 这里做了很多繁重的工作，比如光标跟踪或单词分割。 但最重要的是，标记化。

所以标记化发生了。 这是识别代码中每个元素并理解它们的过程。 想想很多正则表达式匹配。 在流程代码文本被分解成片段后，每个片段都标记了它们的标记类型，如variable 、 parameter 、 number等。

然后根据标记化的结果呈现代码的View 。 每个片段都被渲染为类似<span class="variable">code here</span> ，CSS 会相应地给它着色。 当然，整个事情很可能被包裹在<pre>标签中。