使用自定义语言在 React 应用程序中突出显示语法
Syntax highlighting in a React app using custom languages
我正在开发一个包含在用户端编写代码的 React 应用程序。所以，语法高亮会很可爱。问题是有问题的语法是非标准的——没有软件包会内置它。
我已经研究了一段时间了，但我几乎没有运气获得任何标准包来让我导入自定义语言。因此，如果有人可以推荐一个可以轻松做到这一点的软件包，我将不胜感激。其他选择是建立我自己的。这是合理的，因为我只需要非常少量的实际 highlights/colors（无论如何我都必须写那部分）。
那样的话，我真的不明白这些不同的组件是如何工作的。我看到他们倾向于使用包含 span 元素等的 pre 标签以及文本区域。不知何故文本区域被用于实际打字但可能被隐藏了？这就是它的样子，在文本框中创建格式化文本的错觉。维护一个干净的副本以供解释，并维护一个格式化的副本以供显示。
但我不知道使这项工作有效的实际结构是什么。为什么pre area会隐藏textbox？这就是正在发生的事情吗？它是以某种方式改变它，还是只是匹配它？
如果了解这些内容的任何人都可以提供有关 JS 语法高亮器如何工作的高级概念，以及 HTML 结构，那可能足以告诉我如何构建一个。
谢谢。
高级概念简要如下：
大多数代码编辑器不使用 textarea 来显示实际代码，因为不可能将 fine-grained 语法高亮应用到 textarea。
隐藏的文本区域是“write-only”，它仅用作输入事件捕获器。代码文本的显示，又名 View，将在稍后重建。
文本字符串存储在幕后的某个内部 DocumentModel 中，他们可能会这样称呼它。这里完成了很多繁重的工作，比如 cursor-tracking 或 word-segmenting。但最重要的是，标记化。
所以标记化发生了。这是识别代码中每个元素并理解它们的过程。想想很多正则表达式匹配。在流程代码文本被分解成片段后，每个片段都标记了它们的标记类型，如 variable、parameter、number 等
然后根据标记化结果呈现 View 代码。每个片段都呈现为 <span class="variable">code here</span> 之类的东西， CSS 会相应地为其着色。当然，整个事情很可能包含在 <pre> 标签中。
我正在开发一个包含在用户端编写代码的 React 应用程序。所以，语法高亮会很可爱。问题是有问题的语法是非标准的——没有软件包会内置它。
我已经研究了一段时间了，但我几乎没有运气获得任何标准包来让我导入自定义语言。因此，如果有人可以推荐一个可以轻松做到这一点的软件包，我将不胜感激。其他选择是建立我自己的。这是合理的，因为我只需要非常少量的实际 highlights/colors（无论如何我都必须写那部分）。
那样的话，我真的不明白这些不同的组件是如何工作的。我看到他们倾向于使用包含 span 元素等的 pre 标签以及文本区域。不知何故文本区域被用于实际打字但可能被隐藏了？这就是它的样子，在文本框中创建格式化文本的错觉。维护一个干净的副本以供解释，并维护一个格式化的副本以供显示。
但我不知道使这项工作有效的实际结构是什么。为什么pre area会隐藏textbox？这就是正在发生的事情吗？它是以某种方式改变它，还是只是匹配它？
如果了解这些内容的任何人都可以提供有关 JS 语法高亮器如何工作的高级概念，以及 HTML 结构，那可能足以告诉我如何构建一个。
谢谢。
高级概念简要如下：
大多数代码编辑器不使用 textarea 来显示实际代码，因为不可能将 fine-grained 语法高亮应用到 textarea。
隐藏的文本区域是“write-only”，它仅用作输入事件捕获器。代码文本的显示，又名 View，将在稍后重建。
文本字符串存储在幕后的某个内部 DocumentModel 中，他们可能会这样称呼它。这里完成了很多繁重的工作，比如 cursor-tracking 或 word-segmenting。但最重要的是，标记化。
所以标记化发生了。这是识别代码中每个元素并理解它们的过程。想想很多正则表达式匹配。在流程代码文本被分解成片段后，每个片段都标记了它们的标记类型，如 variable、parameter、number 等
然后根据标记化结果呈现 View 代码。每个片段都呈现为 <span class="variable">code here</span> 之类的东西， CSS 会相应地为其着色。当然，整个事情很可能包含在 <pre> 标签中。