|
- {{define "head"}}<title>Markdown Preview</title>
- <style type="text/css">
- 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>
- {{end}}
-
- {{define "body-attrs"}}id="post"{{end}}
-
- {{define "content"}}
- <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"><p style="display: block; text-align:center; font-style:italic; color:#999;">(Post preview will appear here.)</p></article>
- {{end}}
|