Customize markdown headings rendering

[fbeaufume]

Operating system

Windows 10

Eleventy

1.0.2

Describe the bug

Because of some conflict between Bootstrap fixed navbar and HTML sections, I'd like to customize the HTML generation of level 3 headings.

I'd like ### Some title to produce <section id="some-title"><h3 class="py-3">Some title</h3></section>.

Currently I'm using a paired shortcode, but this is intrusive and not WYSIWYG friendly in my text editor (IntelliJ), as I have to use {% section %}Some title{% endsection %} in the markdown template.

So, is there a non intrusive solution, i.e. without impacting the markdown content ?

[pdehaan]

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.

[pdehaan]

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

[fbeaufume]

Thank you for the suggestions.

Markdown-it-header-sections may do the trick,

Custom renderers also seems very nice to customize the produced HTML. That's what I was originally looking for.

I found a pure CSS solution (using scroll-margin-top), that does not require to wrap the <h3> in a <section> (or <div>), meaning that I no longer need to tweak the markdown files, using markdown-it-attrs is enough.

I guess this issue can be closed.