如何在一个可信的div中进行语法高亮?

时间:2015-08-07 22:54:36

标签: javascript syntax syntax-highlighting contenteditable

我有一个满足的div:

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

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

因此,当用户键入变量,标签等时,它们是彩色编码的

1 个答案:

答案 0 :(得分:1)

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

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

有一个&#34;教程&#34;由bililite,它可以帮助您完成这项任务。 你可以找到它here

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