In prototypes and HTML-based slide decks, it's pleasant to write in markdown sometimes and avoid all those angle brackets.
So the idea is you're operating in an HTML environment but a few shortcuts would help so use markdown here and there.
- Add the following script into your HTML after the content, before other scripts
- It automatically adds github flavored markdown's if it's not already in.
- Add
data-markdown
attributes to any tags where you're gonna use markdown within. (see example)
This script works fine in your page and can also be used as a userscript. Just click the raw
link right below to install.
(As this requires some clientside js and can trigger FOUC, this is not for production use)
Did some experimenting with something similar recently. Turns out it's more complicated than what you propose.
Two problems:
HTML entities
elem.textContent
will mess up HTML, but Markdown is supposed to be a superset of HTML. So you will needelem.innerHTML
, but that will encode certain characters as HTML entities.For example, the following Markdown in your document will render just fine:
Result:
But imagine having something like this in your document:
What you want the rendered result to be:
What the rendered result is instead:
A solution is to manually decode all HTML entities before passing the string on to the Markdown parser. I used something along the following lines (uses jQuery), but it could very well be that there are problems with this approach as well (for example; aren't we decoding a lot of entities that should not be decoded at all here?):
Indentation
As soon as you want to include a monospaced block or anything that requires extra indentation, your solution of simply stripping all leading whitespace will mess things up.