React-markdown: How can I render anchors?

[neilyoung]

Since internal HTMl is broken: How can I address a specific topic in my document?

This

[Link](#bla)

produces a correct link to a topic

## bla

But the link doesn't work

[rexxars]

You could define a custom heading renderer.
Something along the lines of this? (psuedo code, untested, and you probably want a proper slug function instead of this one)

function Heading(props) {
  const text = props.children.reduce(reduceTextChildren, []).join(' ')
  const slug = text
    .toLowerCase()
    .replace(/\s+/g, '-')
    .replace(/[^a-z-]/g, '')

  return React.createElement(`h${props.level}`, {id: slug}, props.children)
}

<Markdown source="# Some *heading*" renderers={{heading: Heading}} />

// <h1 id="some-heading">Some <em>heading</em></h1>

[neilyoung]

Sorry, what is reduceTextChildren?

[neilyoung]

Disregard, stupid question