writeas
/
developers-web


			
				
					
						
						
							
							<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>