doersino/markdeep-preview.html

## markdeep-preview.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    #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;
    }
  </style>
</head>
<body>
  <h2>Markdeep preview</h2>
  <table id="markdeep">
  <thead>
      <tr>
        <th class="code">Markdeep code</th>
        <th class="preview">Preview</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>
          <textarea id="markdeep_input"></textarea>
        </td>
        <td>
          <div class="markdeep"></div>
        </td>
      </tr>
  </tbody>
  </table>

  <script>window.markdeepOptions = {mode: 'script'};</script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  <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";
      //console.log(window.markdeep.format(input));
      $('.markdeep').html(window.markdeep.format(input));  // <----------- magic
      postprocessMarkdeep();
    });
  });

  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 a.target').hide();

    // tell mathjax to render math
    $('.markdeep').each(function() {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).get()]);
    });
  }
  </script>
</body>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>
	#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;
	}
	</style>
	</head>
	<body>
	<h2>Markdeep preview</h2>
	<table id="markdeep">
	<thead>
	<tr>
	<th class="code">Markdeep code</th>
	<th class="preview">Preview</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>
	<textarea id="markdeep_input"></textarea>
	</td>
	<td>
	<div class="markdeep"></div>
	</td>
	</tr>
	</tbody>
	</table>

	<script>window.markdeepOptions = {mode: 'script'};</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	<script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
	<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";
	//console.log(window.markdeep.format(input));
	$('.markdeep').html(window.markdeep.format(input)); // <----------- magic
	postprocessMarkdeep();
	});
	});

	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 a.target').hide();

	// tell mathjax to render math
	$('.markdeep').each(function() {
	MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).get()]);
	});
	}
	</script>
	</body>