当前位置: 代码迷 >> JavaScript >> 如何在contenteditable div中突出显示语法?
  详细解决方案

如何在contenteditable div中突出显示语法?

热度:77   发布时间:2023-06-07 15:30:43.0

我有一个内容可编辑的div:

<div class="one" contenteditable="true">A</div>

如果用户在该contenteditable div中输入HTML,CSS或Javascript标记,我该如何突出显示其语法?

因此,当用户键入变量,标签等时,它们将使用颜色编码

这并不像初看起来那样容易。

您可以使用一些现有的突出显示库(例如或创建自己的解决方案,然后实现自定义的重新渲染功能,该功能将保存当前光标位置->解析内容并更新外观(这是语法突出显示库的任务),然后再次将光标设置到上一个位置。

胆石有一个“教程”可以帮助您完成此任务。 你可以在找到它。

TBH:我很惊讶那里(如果我错了,请纠正我)似乎没有开源的解决方案。 有需要吗?