1

Leading whitespace in my markdown file is being lost when rendering the text in a react-markdown component.

I am reading the file as follows,

fetch(file)
  .then((res) => res.text())
  .then((text) => this.setState({ markdown: text }));

and the render:

const { markdown } = this.state;
return (
  <Markdown
    className="textblock"
    children={markdown}
    remarkPlugins={[remarkBreaks]}
  >
)

If I have a line in the markdown file

dog

it is rendered as

dog

And if I have a line

&nbsp;dog

it is rendered the same,

dog

I have console log'd the 'text' variable from the first snippet (in the fetch), and can see that nbsp characters are preserved. So I think that I am using the react-markdown component wrong. It does not matter if I set the textblock property, white-space: pre, the whitespace has already been lost (does not exist in the react-markdown component's content).

louisdeb
  • 360
  • 4
  • 16

0 Answers0