The Joy of Mixing Custom Elements, Web Components, and Markdown

Summary

The Joy of Mixing Custom Elements, Web Components, and Markdown I love Markdown. I write faster and more natively in it than any other format or tool. If we zoom way out, here’s the most basic philosophy of Markdown: replace complicated stuff with simpler stuff. That’s all it does, really. It replaces some tedious nested taggy stuff with way simpler stuff that makes more visual sense and is faster to type. At its core, Markdown is really just a bunch of macros. This website runs on 6,000-ish Markdown files. They’re processed on the server – meaning the Markdig library from .NET processes them, then sends back the resulting HTML. I’m all-in on Markdown, to the point where I wrote my own online editor for it. Server-side processing of Markdown is a pretty common model – most static site generators fundamentally do the same thing: they process the Markdown, turn it into HTML, and that gets sent to the server (via being written to files). One of the philosophical points of Markdown is that you can mix it with HTML. Meaning, a Markdown parser is supposed to leave HTML alone – if a line of text looks like it has some tags, the parser should skip it. This means you can do this: This is some **Markdown!** <img src="yay.jpg" /> This is some more ***Markdown!*** And that should work fine. The first and last lines will be processed and transformed, and the middle line will be left alone and output as it’s written. These were the original rules around inline HTML in Markdown: The only restrictions are that block-level HTML elements […] must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. I didn’t find the need for blank lines in the CommonMark spec, but just note that every Markdown processor might be a little different in this respect, so test. Anyway, we’ll likely get HTML that’s something like this out of the above Markdown. <p>This is some <strong>Markdown!</strong></p> <img src="yay.j...