Render styleable Markdown in your HTML with <md-block>

To render Markdown on web pages, Lea Verou created <md-block>. It’s a zero-dependency Custom Element that, unlike other solutions, renders the content in the light DOM which allows you to style the output easily.

There are many web components these days to render Markdown to HTML. However, all render the resulting Markdown in Shadow DOM, making it painful to style like a regular part of the page, which my use cases required.

I also wanted a few more things existing web components didn’t have.

So I made my own. Feel free to use it. Or don’t. 🤷🏽‍♀️ I primarily wrote it to scratch my own itch anyway! 😊

Projects that grow out of a personal necessity are the best ones 🙂

~

Load it in via a <script> tag, or import the proper classes.

<script type="module" src="https://md-block.verou.me/md-block.js"></script>

import { MarkdownBlock, MarkdownSpan, MarkdownElement } from "https://md-block.verou.me/md-block.js";

Both methods self-register the <md-block> Custom Element, which can then be used as follows:

<md-block>
	# Heading

	Text **bold text** *italic text* ~strike~

	```js
	test.foo();
	```

	```html
	&lt;foo&gt;
	```

	* List item 1
	* List item 2
</md-block>

~

In addition to the simple example above, it also supports rendering externally loaded markdown, allows customisation of the start heading level, has syntax highlighting (powered by Prism), can auto-link the headings, etc. Also comes with a <md-span> Custom Element (which is also registered upon loading).

In order to get to the final result, some heavy “Yak Shaving” was involved though. Now that sounded a wee bit too familiar to be honest … 😅

<md-block> →
On Yak Shaving and <md-block>, a new HTML element for Markdown →