71 lines
2.0 KiB
HTML
71 lines
2.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>Markdown preview demo</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://write.as/css/write.354bde4c8aba9afdc8e24.css" />
|
|
|
|
<style>
|
|
h1#markdown {
|
|
margin: 1em 0;
|
|
}
|
|
textarea {
|
|
margin: 2em 0 1em;
|
|
min-height: 10em;
|
|
font-size: 1em;
|
|
border: 1px solid #ccc !important;
|
|
padding: 1em;
|
|
border-radius: 0.25em;
|
|
resize: vertical;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function preview() {
|
|
var $submit = document.querySelector('input[type=submit]');
|
|
$submit.disabled = true;
|
|
$submit.value = '...';
|
|
var http = new XMLHttpRequest();
|
|
var url = "https://write.as/api/markdown";
|
|
var params = {
|
|
"raw_body": document.querySelector('#writer').value,
|
|
}
|
|
http.open("POST", url, true);
|
|
http.setRequestHeader("Content-type", "application/json");
|
|
http.onreadystatechange = function() {
|
|
if (http.readyState == 4) {
|
|
$submit.disabled = false;
|
|
$submit.value = 'Preview';
|
|
if (http.status == 200) {
|
|
data = JSON.parse(http.responseText);
|
|
document.querySelector('#preview').innerHTML = data.data.body;
|
|
} else {
|
|
alert("Failed: "+http.status);
|
|
}
|
|
}
|
|
}
|
|
http.send(JSON.stringify(params));
|
|
}
|
|
</script>
|
|
</head>
|
|
<body id="post">
|
|
<div class="content-container tight" style="margin-bottom: 0;">
|
|
<h1 id="markdown">Markdown Preview</h1>
|
|
<p>This uses the Write.as / WriteFreely API to generate HTML from the given Markdown content.</p>
|
|
<p><a href="https://developers.write.as/docs/api/#render-markdown">Read the documentation</a>.</p>
|
|
</div>
|
|
|
|
<div class="content-container">
|
|
<form method="post" action="https://write.as/api/markdown" onsubmit="preview(); return false;">
|
|
<textarea id="writer" name="raw_body" placeholder="Write..." class="norm" autofocus># Test out some Markdown
|
|
|
|
Enter anything here and press **Preview** to see what it looks like.</textarea>
|
|
<input type="submit" value="Preview" />
|
|
</form>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<article class="norm h-entry" id="preview"></article>
|
|
</body>
|
|
</html>
|