JSFiddle - React, Tailwind, and code Playground

by Alexey Zuev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<div id="container">
    <h1>Hello World!!</h1>
</div>

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

JavaScript

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.children[0]);
        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 () {
        var code = container.textContent.trim();
        container.innerHTML = code;  
    }, false);