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~

	&grave;&grave;&grave;js
	test.foo();
	&grave;&grave;&grave;

	&grave;&grave;&grave;html
	&lt;foo&gt;
	&grave;&grave;&grave;

	* 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 (using 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 →

Source: Bram Van Damme

November 29, 2021
Category : News
Tags: custom elements | Elsewhere | Link | markdown | web components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.