How to do reverse operation in highlight.js or other similar library?

Question

JavaScript

Hello. I use the highlight.js library for syntax highlighting. There is such a code

<div id="container">
    <h1>Hello World!!</h1>
</div>

<button id="edit">Edit</button>
<button id="done">Done</button>

var container = document.getElementById('container'),
        edit = document.getElementById('edit'),
        done = document.getElementById('done');

    edit.addEventListener('click', function () {
        var code = container.innerHTML,
            $pre = document.createElement('pre'),
            $code = document.createElement('code');

        container.setAttribute('contenteditable', true);
        container.removeChild(container.childNodes[1]);
        container.appendChild($pre);
        $pre.appendChild($code);
        $code.innerHTML = code.replace(/<|>/g,function(s){return s==="<"?"&lt;":"&gt;"}).replace( /<(\/?script)>/g ,"&lt;$1&gt;");
        hljs.highlightBlock($code);

    }, false);

    done.addEventListener('click', function () {
        // ОБРАТНАЯ ОПЕРАЦИЯ
    }, false);

When I click on the edit button, I show the html code with highlighting, while the user can edit this code. The problem is that I don't know how to do the reverse operation. That is, so that when you click on the done button, what the user has edited is parsed and executed as html.
That is, when editing, he saw
<h1>Hello World</h1>
And when he pressed done and did not change anything in the code, he saw: Hello World
Perhaps the highlight.js library cannot do the reverse operation, then please tell me if you know other similar libraries with syntax highlighting, who are able to do it.
Thanks for your help and your time.

Answer 1

jsfiddle.net/yurzui/j6ev5pgr/