Replace Footnotes Header with a horizontal line

[shamoilarsi]

on adding footnotes to my docs website, a header Footnotes is added by default.

I would like to have a horizontal line instead of the header as seen in Uniswap here

A possible solution is that i could add a --- on the .md files and hide the header from the custom.css file by using

.footnotes h2 {
  display: none;
}

but this looks like a hacky way of doing it. It is also not the way Uniswap achieved it (confirmed from their GitHub repo)

any suggestions on how I can achieve this?

[slorber]

Uniswap site is using Docusaurus v2 (using MDX v1)

Using a separator like this is how MDX v1 used to do. But now in MDX v2 (used by Docusaurus v3) it creates a heading.

I'm not sure how you can revert to the old behavior, apart writing a remark plugin that replaces that heading with a separator. Any idea @wooorm ?

Note that we expose config.markdown.remarkRehypeOptions that permit to control a bit this behavior:

• the footnote label "Footnotes" should be able to be translated #9502
• https://github.com/remarkjs/remark-rehype#options

Maybe try footnoteLabelTagName: 'hr' ?

[wooorm]

You can configure things. Read the readmes of https://github.com/remarkjs/remark-gfm and https://github.com/remarkjs/remark-rehype indeed. Particularly the CSS section in remark-gfm.

[shamoilarsi]

@slorber @wooorm hey guys thanks for the reply.

i tried footnoteLabelTagName: 'hr' but it doesn't seem to work

hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

I read the readmes of the remark-gfm and remark-rehype but I couldn't find anything that would completely solve my issue.
In the CSS sections I found a way to hide the label itself by editing the .sr-only class although I need to replace it with a horizontal line as well without editing the .md/.mdx file.

I've already tired the method of hiding the "Footnotes" header using CSS and adding a --- in the .md file. It works although it felt a bit hacky and thought maybe there was some config option that I overlooked.

[slorber]

@shamoilarsi I just applied @wooorm suggestion and it worked immediately for me 🤷‍♂️

Just copy that CSS: https://github.com/micromark/micromark-extension-gfm-footnote#css

https://stackblitz.com/edit/github-wjfzlc?file=src%2Fpages%2Findex.mdx,src%2Fcss%2Fcustom.css

The only difference it that the h2 becomes a separator, and it's not using <hr/> under the hood.

[shamoilarsi]

@slorber ahh you're correct, it works.
I remember trying this other day, not sure what went wrong then. I might have been too focused to achieve it with hr as seen on Uniswap.

Anyway thanks a lot @slorber and @wooorm 🙏

[wooorm]

You can use CSS to create a line, too.
You do not need an hr element.