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

Feature requests
1

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>

15 Likes
2

+1 Here’s hoping this can make it as a native feature some day.
Currently I am using a Markdown Attributes plugin by Jeremy Valentine, it’s working just as you described.
But yeah. Applying your own custom classes for aligning images, highlighting text, etc. without having to fill your notes with HTML is just invaluable.

3 Likes
3

I could use this very much. I need to style some elements that are being used by another plugin. This would make everything work very smoothly. I have tried markdown attributes, but it isn’t working in my case. It works in view mode, but the output is not being fed to other plugin…

1 Like