-
-
Save cferdinandi/81e666a602f6b5fe2aa0cffd6e31b6ab to your computer and use it in GitHub Desktop.
This file contains 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> | |
| <head> | |
| <title>Vue Markdown in Vanilla JS Demo</title> | |
| <style type="text/css"> | |
| html, | |
| body, | |
| #editor { | |
| margin: 0; | |
| height: 100%; | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| color: #333; | |
| } | |
| textarea, | |
| #editor div { | |
| display: inline-block; | |
| width: 49%; | |
| height: 100%; | |
| vertical-align: top; | |
| box-sizing: border-box; | |
| padding: 0 20px; | |
| } | |
| textarea { | |
| border: none; | |
| border-right: 1px solid #ccc; | |
| resize: none; | |
| outline: none; | |
| background-color: #f6f6f6; | |
| font-size: 14px; | |
| font-family: "Monaco", courier, monospace; | |
| padding: 20px; | |
| } | |
| code { | |
| color: #f66; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="editor"> | |
| <textarea># Hello, world</textarea> | |
| <div></div> | |
| </div> | |
| <script src="https://unpkg.com/marked@0.3.6"></script> | |
| <script> | |
| // Variables | |
| var text = document.querySelector('#editor textarea'); | |
| var compiled = document.querySelector('#editor div'); | |
| var debounce; | |
| var render = function () { | |
| compiled.innerHTML = marked(text.value, {sanitize: true}); | |
| }; | |
| // On change event, process text into markdown and render | |
| var changeHandler = function () { | |
| clearTimeout(debounce); | |
| debounce = setTimeout(render, 300); | |
| }; | |
| // Listen for changes to textarea | |
| render(); | |
| text.addEventListener('input', changeHandler); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment