Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/markdown-editor.html

Last active February 28, 2023 22:23
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cferdinandi/2218858af04d5306904fe57c184fc17a to your computer and use it in GitHub Desktop.
Save cferdinandi/2218858af04d5306904fe57c184fc17a to your computer and use it in GitHub Desktop.
Download ZIP
A vanilla JS version of the example markdown editor app for Vue.js. https://vuejs.org/v2/examples/
Raw
markdown-editor.html
<!DOCTYPE html>
<html>
<head>
<title>Marked Demo</title>
<style type="text/css">
body {
margin: 0 auto;
height: 100%;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
}
#editor,
#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;
}
</style>
</head>
<body>
<textarea id="editor" autofocus></textarea>
<div id="compiled-markdown"></div>
<script src="https://unpkg.com/marked@0.3.6"></script>
<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 (!event.target.matches('#editor')) return;
compiled.innerHTML = marked(event.target.value, { sanitize: true });
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment