Как сделать обратную операцию в highlight.js или другой подобной библиотеки?
 

Использую библиотеку highlight.js для подсветки синтаксиса. Есть такой код

<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);

При нажатии на кнопку edit я показываю html код с подсветкой, при этом пользователь может этот код редактировать. Проблема в том, что не знаю, как выполнить обратную операцию. То есть, чтоб при нажатии на кнопку done, то что отредактировал пользователь распарсилось и выполнилось, как html. То есть, при редактировании он видел

<h1>Hello World</h1>

А когда нажал done и при этом ничего не поменял в коде, то увидел: Hello World Возможно библиотека highlight.js не умеет делать обратную операция, тогда подскажите пожалуйста, если вы знаете другие подобные библиотеки с подсветкой синтаксиса, которые умеют это делать. Спасибо за помощь и ваше время.