Last active
September 30, 2024 12:14
-
-
Save doersino/9dcc636493ff1deb30912ed2efc44891 to your computer and use it in GitHub Desktop.
Preview Markdeep as you're typing (very simple, unstyled proof of concept)
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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment