Customizing the react markdown footnote component #1270
-
Hi all, I'm currently working with React Markdown, using the remark gfm plugin so I can handle footnotes and other things. I'm familiar with the ability to add a custom import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:
~~~js
console.log('It works!')
~~~
`
createRoot(document.body).render(
<Markdown
children={markdown}
components={{
code(props) {
const {children, className, node, ...rest} = props
const match = /language-(\w+)/.exec(className || '')
return match ? (
<SyntaxHighlighter
{...rest}
PreTag="div"
children={String(children).replace(/\n$/, '')}
language={match[1]}
style={dark}
/>
) : (
<code {...rest} className={className}>
{children}
</code>
)
}
}}
/>
) I have been trying to figure out how to do something analogous with footnotes, but I can't find any documentation on what that component ought to be named, or if it exists at all. Also from the React Markdown README is mention of remark-gfm supporting certain custom components, but there's no mention of the footnote component there (https://github.com/remarkjs/react-markdown#appendix-b-components). Anyway, if someone could point me to some documentation I've been missing, advise if I'm on the right track, or otherwise let me know if this is possible, I'd really appreciate it! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hey! When using There are no particular components things. There are HTML tags that you can overwrite. You can overwrite each HTML element with a component. Use your developer tools to inspect which elements are currently generated, and which classes. Then you can swap those out for components. You’ll see there’s a |
Beta Was this translation helpful? Give feedback.
Hey!
When using
remark-gfm
, footnotes should work.There are no particular components things. There are HTML tags that you can overwrite. You can overwrite each HTML element with a component.
Use your developer tools to inspect which elements are currently generated, and which classes. Then you can swap those out for components. You’ll see there’s a
sup
and a particulara
with a data field for example.