How to customise markdown in 11ty

Transforming markdown elements

You can add custom renderer rules to markdown-it as described here. What they don't tell you is that the list of what markdown elements are called can only be found by looking through the source code. Most of the elements can be found in the rules_block directory, and then inside those files will be a line pushing a token onto the renderer state, like:

token        = state.push('heading_open', 'h' + String(level), 1);

Which in this case, tells us that heading_open is the name given to all opening tags like <h1> or <h2>.

Adding custom components with shortcodes

There is already documentation and an article by Aleksandr Hovhannisyan on this topic.

This is an aside that can be used to add additional notes, eg. here we might link to the Markdown docs.

This is an aside that can be used to add additional notes, eg. here we might link to the Markdown docs.

let's add a little spacing here









and this is where it ends

However, if you use lots of aside in a very short space, it won't look so good

one

one

(one)

two

two

(two)

three

three

(three)