Support for adding HTML attributes within Markdown editor?

Questions and Answers
1
System Information
  • Strapi Version: 4.12.0
  • Operating System: MacOS
  • Database: SQLite
  • Node Version: 18.12.0
  • NPM Version: 8.19.2
  • Yarn Version: 1.22.19

(:wave: first time poster and newbie Strapi user)

I’m interested in the ability to add attributes to the rendered HTML elements from within the Strapi Markdown editor, similar to markdown-it-attrs:

Example input:

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

Output:

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

Being able to do this would allow me to create custom styled components within posts, like so:

This is a Lead element {.style=lead}

Right now I’m using h5s as a workaround for a lead component, but all other elements have their own styling and I don’t have many other elements that I can use if I want any other custom styled elements in the rendered output.

Using markdown-it-attrs requires using markdown-it as the markdown parser, but I’m using react-markdown as it has other features that I want to use.

I haven’t come across anything obvious when searching, but hopefully I’m just missing something simple.

Has anybody else achieved something like this using Strapi?

Thanks!