Javascript 如何在使用Highlight.js插件时动态应用样式？

我正在编写一些代码，需要动态触发事件并应用突出显示样式。由于某些原因，样式没有得到应用

hljs.initHighlightingOnLoad（）；
var content_div=document.getElementById（“编辑”）；
content_div.addEventListener（“按键”，函数）（）{
hljs.initHighlightingOnLoad（）；
})

@导入url（'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css');


var i=0，
颜色=[“红色”、“蓝色”、“绿色”]；
var content=document.getElementById（“文本”）；
函数appendFunction（e，id）{
var new_span=document.createElement（“span”）；
new_span.style.color=颜色[i]；
new_span.textContent=id.textContent；
id.append（新的_span）；
//var new_span=“”+id.textContent+”；
//变量
//id.append（新的_span）；
}
var id=document.getElementById（“文本”）；
id.addEventListener（“键控”，函数（事件）{
appendFunction（事件，id）；
})

我将
id=“codeblock”
添加到您的html
标记中

还有更新的js，我将按键改为模糊，这样你可以更新代码，当你失去焦点时，你会得到更新的样式：

您是否阅读了文档@FelixKling他们没有提到任何关于飞行的事没有？
自定义初始化部分如何？或者关于。@FelixKling api没有谈到附加事件和设置它的样式。没错，文档中没有说明如何附加事件处理程序，但这不是库关心的问题。您似乎已经知道如何绑定事件处理程序。文档显示的是存在哪些方法、它们期望什么输入以及它们的返回值。从我发布的第一个链接：
hljs.highlightBlock（block）。但是，如果您想在编写代码时突出显示代码，事情可能会更复杂，您可能需要查看现有的编辑器解决方案。我将事件更改为“keyup”，并在keycode 32上触发突出显示函数。执行此操作时，光标从该行的第0个索引开始。你知道问题出在哪里吗？@SharathV每次更新样式时，你都会失去焦点，因此你从行的开头开始，不确定修复方法，这就是我建议你使用的原因blur@SharathV：更改元素的内容（即应用高亮显示时所做的操作）将影响光标位置。这就是为什么我建议使用现有的解决方案，当然，除非你想自己解决光标问题。@SharathV我可能有一个解决方案，等等sec@FelixKling是否可以使用此编辑器将该样式应用于普通文本？我尝试过使用普通的javascript，但是这种方式需要做太多的工作。这是四字格的提琴：。
hljs.initHighlightingOnLoad();

var content_div = document.getElementById("edit");
content_div.addEventListener("blur", function() {
  hljs.highlightBlock(document.getElementById("codeblock"));
})