SO - 17899550

by Arun P Johny

HTML

<script src="https://archwomen.org/blog/submit/markdown.js"></script>
<form name="submit" action="save.php" method="post">
<table>
<tr>
    <td>Post Body:</td>
    <td></td>								   
    <td>Preview:</td>
 	<td><button type="button" onclick="transformTag('html', 'preview');" >Live</button>
        <button type="button" onclick="transformTag('input', 'preview');" value="transform">Html</button>
		<input type="submit" value=" Save ">
    </td>
</tr>
<tr>
     <td colspan="2"><textarea rows="25" cols="25" name="comment" id="text-input" oninput="this.editor.update()">
Headers

## This is an <h2> tag
### This is an <h3> tag
#### This is an <h4> tag

= Text styles =

*This text will be italic*

_This will also be italic_

**This text will be bold**

__This will also be bold__

*You **can** combine them*
        </textarea></td>
        <td colspan="2" style="vertical-align: top"> <div style="padding-left:20px;" id="preview"></div></td>
</tr>
</table>
</form>

JavaScript

function Editor(input, preview) {
    this.update = function () {
        preview.innerHTML = markdown.toHTML(input.value);
    };
    input.editor = this;
    this.update();
}
var $ = function (id) { 
    return document.getElementById(id); 
};
new Editor($("text-input"), $("preview"));

window.transformTag = function(type, tagId){
    var elem = document.getElementById(tagId), newNode;
    var children = elem.childNodes;
    var parent = elem.parentNode;
    
    if(type == 'input'){
        newNode = document.createElement("textarea");
        newNode.readOnly = true;
        newNode.value = elem.innerHTML;
    } else {
        newNode = document.createElement("div");
        newNode.readOnly = true;
        newNode.innerHTML = elem.value;
    }
    newNode.id = tagId;
    parent.replaceChild(newNode, elem);
}