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

我有一个可编辑的div：

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

A

如果用户在contenteditable div中输入HTML、CSS或Javascript标记，我将如何使其语法突出显示

---

因此，当用户键入变量、标记等时，它们都是彩色编码的

这并不像一开始看起来那么容易

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

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

---

TBH：我很惊讶（如果我错了，请纠正我）似乎没有开源解决方案。是否需要这样做？

一种可能的解决方案是将语法高亮显示类添加到div中，但这种方法假设整个div都属于该语言。用谷歌搜索美化，看看这是否对你有帮助