Add support for HTML / CSS attributes using markdown-it-attrs syntax

There is a MultiMarkdown feature request similar to this, but its syntax is inelegant and incomplete for general-purpose attribute use.

The npm module markdown-it-attrs uses the clean and simple syntax of curly brackets after a markdown tag or block: {.class #identifier attr=value attr2="spaced value"} This is similar to pandoc’s header attributes.

This would allow for easy and clean addition of things like custom link classes that aren’t specific to an Obsidian feature (like being an orphan link):

This is a [special link](http://special.link){.custom} with custom class.

Output would be:

<p>This is a <a href="http://special.link" class="custom">special link</a> with custom class.</p>

From the npm page, some other types of examples. See the page for a full list.

Input:

# header {.style-me} 
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Works with inline elements too:

paragraph *style me*{.red} more text

Output:

<p>paragraph <em class="red">style me</em> more text</p>

7 Likes