Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Preview Markdeep as you're typing (very simple, unstyled proof of concept)
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
#markdeep_input {
height: 600px;
font-family: monospace;
td {
padding: 0.5em;
.code, .preview {
width: 40vw;
textarea {
width: 100%;
.md p {
font-size: inherit;
font-weight: normal;
margin: 0 0 10px;
.md h1, .md h2, .md h3 {
margin-top: 0;
padding-top: 0;
.md h1:before, .md h2:before, .md h3:before {
display: none;
.md h1 {
font-size: 21px;
.md h2 {
font-size: 18px;
.md h3 {
font-size: 16px;
<h2>Markdeep preview</h2>
<table id="markdeep">
<th class="code">Markdeep code</th>
<th class="preview">Preview</th>
<textarea id="markdeep_input"></textarea>
<div class="markdeep"></div>
<script>window.markdeepOptions = {mode: 'script'};</script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
$(document).ready(function() {
"use strict";
document.head.innerHTML = window.markdeep.stylesheet() + document.head.innerHTML;
$('#markdeep_input').on("change keyup paste", function() {
var input = $('#markdeep_input').val() + "\n";
$('.markdeep').html(window.markdeep.format(input)); // <----------- magic
function postprocessMarkdeep() {
// for some reason, markdeep creates an additional, superflous <p> tag right
// at the beginning, so let's get rid of that
$('.markdeep .md > p:first-child').hide();
// anchors mess up the spacing, so purge them too
$('.markdeep .md').hide();
// tell mathjax to render math
$('.markdeep').each(function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).get()]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment