Last active
March 22, 2023 17:39
-
-
Save KiyoNetcat/c7573787c26b7f538e474ee8e13b5bbb to your computer and use it in GitHub Desktop.
Extremely Basic Markdown Editor in HTML (/w Live Preview & Download)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Extremely Basic Markdown Editor</title> | |
| <style> | |
| #divoutput {border: 0px; padding: 0px; margin: 0px; float: right; width: 50%} | |
| #divinput {border: 0px; padding: 0px; margin: 0px; float: left; width: 50%} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="divinput"> | |
| <h1>INPUT</h1> | |
| <textarea id="input" autofocus style="width: 95%; height: 200px; resize: vertical;"># hello markdown</textarea> | |
| <br /><br /> | |
| <button id="download">Download</button> | |
| </div> | |
| <div id="divoutput"> | |
| <h1>OUTPUT</h1> | |
| <div id="containeroutput" style="border: 5px solid black; padding: 10px; margin: 5px; resize: vertical; overflow: hidden;"> | |
| <iframe id="output" src="" style="border: 0px; padding: 0px; margin: auto; width:100%; height:90%;"></iframe> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/showdown/dist/showdown.min.js"></script> | |
| <script> | |
| var converter = new showdown.Converter(); | |
| document.getElementById("input").oninput = function type() { | |
| var htmlMarkdown = converter.makeHtml(document.getElementById("input").value); | |
| var htmlBlob = new Blob([htmlMarkdown], {type : 'text/html'}); | |
| document.getElementById("output").src = window.URL.createObjectURL(htmlBlob); | |
| } | |
| document.getElementById("input").oninput(); | |
| document.getElementById("download").onclick = function download() { | |
| var downloadableLink = document.createElement('a'); | |
| downloadableLink.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(document.getElementById("input").value)); | |
| downloadableLink.download = "content" + ".md"; | |
| document.body.appendChild(downloadableLink); | |
| downloadableLink.click(); | |
| document.body.removeChild(downloadableLink); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment