Wie wird das Styling beim Fliegen angewendet, wenn das Highlight.js-Plugin verwendet wird?

Question

Ich arbeite an etwas Code, wo ich Ereignis beim Fliegen auslösen und das Highlight-Styling anwenden muss. Aus irgendeinem Grund wird das Styling nicht angewendet.

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

ich id="codeblock" zu Ihrem HTML <code> Tag

auch mit aktualisiertem js hinzugefügt, geändert ich keypress zu verwischen, so können Sie den Code aktualisieren und wenn Sie verlieren Fokus erhalten Sie den aktualisierten Stil:

hljs.initHighlightingOnLoad(); 

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

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