Breaks Functionality with VuePress & Potentially Other Frameworks

[Enteleform]

See: VuePress/Issues/1203

TLDR:
Some frameworks specifically parse h for IDs; and in the case of VuePress, some of its functionality is broken because of how this extension moves the ID from h to section.

I modified the code to:
- @ the main loop: remove the part that moves the ID from h to section
- @ openSection: give the section an ID equivalent to section--original-id

I was going to submit it as a pull request, however, for some reason it's not working as I expected.

The issue I ran into is that even though I maintained the same data structure of [["id", "some-id"]] from the original code, for some reason it's not actually being applied to the rendered page.

Instead, I'm seeing

<section foo="undefined">
  <h2 id="foo">

where I would expect

<section id="section--foo">
  <h1 id="foo">

Not sure if there's something I'm missing within markdown-it-header-sections, or if this is happening somewhere within markdown-it or elsewhere.

[arve0]

Hi, and thanks for reporting. Open a PR, and I take a look at your code 🙂

Edit: Did not follow your links.

[arve0]

As it is no standard that ids should be on headers like h1, h2, etc, maybe you could provide some evidence that most frameworks expects this? If most do, we'll fix and release as a new major version, as this is a breaking change.

[Enteleform]

maybe you could provide some evidence that most frameworks expects this?

VuePress is really my first exploration of documentation generation, but I just checked out an example of Gatsby's markdown rendering & it appears to use the same header ID convention as VuePress.

 

If most do, we'll fix and release as a new major version, as this is a breaking change.

What if this is implemented as an option instead?

Something like:

md.use(require('markdown-it-header-sections', {prefixSectionIDs:true}))