dynamically changing syntax using highlightjs

Question

var d;

$("#ing").keyup(function(){

    d= $("#ing").val();

    $("#lipu").html(d);
});

This is the code i am using to change the text inside the div dynamically:

hljs.initHighlightingOnLoad(); 

This line of code helps in syntax highlighting when the code is hardcoded in the tags and works perfectly when page loads.

I want to do the exact same thing when I write the text inside the textbox and the highlighted text be displayed inside the div

I have tried to use following functions

hljs.initHighlighting.called = false;

hljs.initHighlighting();

But it did not work...

Please help I know there is a very simple solution but I couldn't find it on internet....

Answer 1

According to the doc : http://highlightjs.org/usage/ this code should work :

$("#ing").on("input", function(){ // Always prefer the 'input' event instead of keyup

    hljs.highlightBlock($("#lipu").html($(this).val()).get(0));

});

OR (to be clearer)

$("#ing").on("input", function(){ // Always prefer the 'input' event instead of keyup
    $("#lipu").html($(this).val());
    hljs.highlightBlock($("#lipu").get(0)); // highlightBlock expect a DOM element
});