Menu
I'm in the process of creating my markdown editor for a web application. A better analogy of this could be Stack Overflow/RedNotebook, where when we type our content into the textbox, the immediate formatted output is shown next to it.
Are there any example implementations of such a model? Or should I start coding from scratch, starting by creating a textbox etc?
Any open source API's for this?
883
Typora was our go-to free Markdown application. Since it's emerged victorious from beta, however, it does now come with a $15 price tag. If you love Typora but would really prefer not to shell out, we've got a few Typora alternatives, all perfectly capable of soothing what ails you.
I have the perfect solution for you, I just wrote this.
Download PHP Markdown Extra, and put in the same dir as this script:
<?php
include_once("markdown.php");
if(isset($_GET['mode']) && $_GET['mode'] == 'ajax')
die(Markdown($_POST['markdown']));
?><html>
<head>
<style>
span { text-align: left; width: 49% }
textarea { height: 100%; width: 100% }
#left { float: left; }
#right { float: right; }
</style>
<script type='text/javascript'>
function ajax()
{
if(window.XMLHttpRequest)
var request = new XMLHttpRequest();
else if(window.ActiveXObject)
var request = ActiveXObject("Microsoft.XMLHTTP");
request.open("POST", "?mode=ajax", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send('markdown=' + document.getElementById('markdown').value);
request.onreadystatechange = function()
{
if(request.readyState == 4 && request.status == 200)
document.getElementById('right').innerHTML = request.responseText;
}
}
window.onload = function(){ ajax(); }
</script>
</head>
<body>
<div>
<span id='left'>
<textarea id='markdown' onkeyup='ajax();'></textarea>
</span>
<span id='right'>
Loading...
</span>
</div>
</body>
</html>
Of course this is just a simple concept. It needs some improvement, but it's the basis of what you're looking for I think.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
