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

Question

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

https://jsfiddle.net/qm9rgh0u/

hljs.initHighlightingOnLoad();

var content_div = document.getElementById("edit");

content_div.addEventListener("keypress", function() {
  hljs.initHighlightingOnLoad();

})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>

<div id="edit" contenteditable="true">
  <pre>
<code>
    var i = 0,
        colors = ["red","blue","green"];
    var content = document.getElementById("text");
    function appendFunction(e,id){

      var new_span = document.createElement("span");
      new_span.style.color = colors[i];
      new_span.textContent = id.textContent;
      id.append(new_span);
      // var new_span = "<span style=color:'+colors[i]+'>"+id.textContent+"</span>";
      // var
      // id.append(new_span);
    }



      var id = document.getElementById("text");
      id.addEventListener("keyup", function(event){
        appendFunction(event,id);
      })



</code>
</pre>
</div>

Answer 1

我添加了 id="codeblock"到你的 html <code>标签

同样使用更新的 js，我将按键更改为模糊，这样您就可以更新代码，当您失去焦点时，您将获得更新的样式:

hljs.initHighlightingOnLoad();

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

https://jsfiddle.net/dalinhuang/r2a56w9b/