Customize markdown headings rendering about eleventy HOT 3 OPEN

I don't think this is an Eleventy issue, and you'll probably want to solve it at a markdown-it level… if we can find the correct markdown-it plugins.

This might work: https://www.npmjs.com/package/markdown-it-header-sections; or at least partially solve it. But this example in their README looked relevant:

# great stuff {.jumbotron}
lorem
 
click me {.btn .btn-default}

OUTPUT

<section class="jumbotron">
  <h1 class="jumbotron">great stuff</h1>
  <p>lorem</p>
  <p class="btn btn-default">click me</p>
</section>

They also mentioned https://github.com/valeriangalliat/markdown-it-anchor which might be useful too.

from eleventy.

And since I still had these tabs open, I wonder if this gets you any closer: https://www.npmjs.com/package/markdown-it-attrs#custom-rendering (and the linked https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer docs).

Not entirely sure how to specifically hook into rules for <h3>, but it may be related to https://github.com/markdown-it/markdown-it/blob/master/lib/rules_block/heading.mjs or maybe some tips in markdown-it/markdown-it#117.

UPDATE: Also https://github.com/markdown-it/markdown-it/blob/master/docs/examples/renderer_rules.md

from eleventy.