Handle titles starting with numbers

[rehypejs]

Handle titles starting with numbers

[chadfawcett]

Thanks for the detailed response @wooorm!

rehype-sanitize definitely seems like the way to go for most projects. Since this is an internal project, I'm going to just go with the getElementById/[id="3-xxx"] syntax so I don't have to worry about the caveats with the changing classes for the other plugins (linking, syntax highlighting, etc).

I’m open to adding an option here to prefix things.

I think the two solutions you provided resolve the need for this option. Hopefully this issue can help someone in the future!

Thanks again :)

[wooorm]

Cool, glad those alternatives work for you!

[wooorm]

Hey Chad!

HTML spec was a little less clear whether it was valid or not

Starting an id attribute value with a number is valid according to HTML. It’s fine.
It only becomes a problem when trying to select it with a selector shortcut: querySelector('#3-xxx') or #3-xxx { color:red }.
It is fine with document.getElementById('3-xxx') and also fine with document.querySelector('[id="3-xxx"]') / [id="3-xxx"] { color: red }

GitHub appends user-content- to all of the ids of in the rendered markdown.

GitHub doesn't include the user-content- in the url produced for each header, but instead handles that client side

Yep, and it does so to prevent DOM clobbering, as a safety measure.
That’s why we also do it at a different place in the pipeline: rehype-sanitize. It has a whole section on how that prefix works, what it solves, and what GitHub adds client-side: https://github.com/rehypejs/rehype-sanitize#example-headings-dom-clobbering.

I’m open to adding an option here to prefix things.
Alternatively, you could investigate using rehype-sanitize too.
But also: perhaps using attribute syntax ([id="3-xxx"]) or getElementById might solve it for you?

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.