Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A vanilla JS version of the example markdown editor app for Vue.js.
<!DOCTYPE html>
<title>Marked Demo</title>
<style type="text/css">
body {
margin: 0 auto;
height: 100%;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
#compiled-markdown {
display: inline-block;
width: 49%;
height: 100vh;
vertical-align: top;
box-sizing: border-box;
padding: 0 1.5em;
#editor {
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 1em;
font-family: 'Monaco', courier, monospace;
padding: 1.5em;
code {
color: #f66;
<textarea id="editor" autofocus></textarea>
<div id="compiled-markdown"></div>
<script src=""></script>
// Get the compiled markdown container
var compiled = document.querySelector('#compiled-markdown');
// Listen for changes to inputs and textareas
document.addEventListener('input', function (event) {
// Only run if the change happened in the #editor
if (!'#editor')) return;
compiled.innerHTML = marked(, { sanitize: true });
}, false);
Copy link

williamd5 commented Apr 19, 2021

Thank you! Nowadays a simple markdown editor seems to require at least 30 dependencies normally: npm, vue.js, jquery, nodejs, npm, bower, travis and what not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment