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

Question

[Isaac Clark]

Здравствуйте. Использую библиотеку 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 не умеет делать обратную операция, тогда подскажите пожалуйста, если вы знаете другие подобные библиотеки с подсветкой синтаксиса, которые умеют это делать.
Спасибо за помощь и ваше время.

Answer 1

[Алексей Зуев]

jsfiddle.net/yurzui/j6ev5pgr/

Comments

[Isaac Clark]

Спасибо огромное.