使用自定义语言在 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> 标签中。