Footnotes get user-content-user-content ids and do not work

[michaelrommel]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

remark-gfm#@3.0.1

Steps to reproduce

Hello,
when using the following sequence of plugins (shortened), I get issues with the footnotes.

	const vfile = await unified()
		.use(remarkParse)
		.use(remarkToc, { maxDepth: 2, tight: true, prefix: 'user-content-' })
		.use(remarkGfm, { singleTilde: false, clobberPrefix: '' })
		.use(remarkSupersub)
		.use(remarkRehype)
		.use(rehypeSlug)
		.use(rehypeAutolinkHeadings, { behaviour: 'wrap' })
		.use(rehypeSanitize, {
			...defaultSchema,
			attributes: {
				...defaultSchema.attributes,
				// The `language-*` regex is allowed by default.
				div: [
					...(defaultSchema.attributes.div || []),
					[
						'className',
						/^language-./,
						'math-inline',
						'math-display',
						'grid-left-right',
						'img-right'
					]
				],
				span: [
					...(defaultSchema.attributes.span || []),
					['className', 'line', 'math-inline']
				],
				SvelteComponent: [
					'componentname',
					'data',
					'xSelector',
					'file',
					'dpr',
					'inertia'
				]
			},
			tagNames: [...defaultSchema.tagNames, 'SvelteComponent']
		})

At the remarkRehype stage already the footnotes have a user-content- prefix and rehypeSanitize adds another one on top of it. Before remarkSanitize it works fine. So in order to not have the footnotes already come with a user-content prefix, I wanted to supply the remarkGfm with a clobberPrefix of "" but it does not trickle down to the footnote plugin.

Is there a way to inherit this?

Probably here?

micromark-extension-gfm/lib/index.js

Line 40 in d64834e

gfmFootnote(),

Thanks,

Michael.

Actual behavior

Footnote

ids get a user-content-user-content prefix.

Expected behavior

I'd like the footnotes before remark-sanitize have NO user-content- prefix

Runtime

node@22.7

Package manager

pnpm

Operating system

linux

Build and bundle tools

Vite

[michaelrommel]

[michaelrommel]

The example of footnotes not working is live here: https://michaelrommel.com/create/2022-01-25-markdown-sample#user-content-superscript--subscript

The sourcecode to that function is here: https://github.com/michaelrommel/blog/blob/main/src/lib/markdown.js

[michaelrommel]

I think, now I solved it. I have set clobberPrefix in the sanitize schema to '' and added a prefix to the rehypeSlug.
I'll keep this open, so that you can share your thoughts on what should be the best way. Feel free to close it, I think (!) it works now. Need further testing...

[wooorm]

Hi!

Different things indeed add prefixes. The way to solve that is to do it once, at the end. By rehype-sanitize.
Do not pass to prefix: 'user-content-' to remark-toc, that duplicates things.

This package itself, micromark-extension-gfm has an option, but that option applies only when you compile directly to HTML, not when you use it with ASTs, as you are doing with remark-gfm.
So, this issue, how you pass that option in your example, that option doesn’t exist. It doesn’t do anything.

Importantly, the markdown is either dangerous or not. If it is not dangerous, you do not need to sanitize it, you do not need prefix things.
If it is dangerous, that means dangerous users can write dangerous things, and you need to prefix them. Still, likely it’s fine, so you want nice URLs. But that means the IDs have to be prefixed, but the links not.
This is explained in the in-depth guide: https://github.com/rehypejs/rehype-sanitize#example-headings-dom-clobbering.