score:3

Accepted answer

you need to remove the first empty line and all the spaces at the beginning of each line. it might look weird - but that is what reactmarkdown expects you to do.

your component will end up looking like this: notice the "strange" spacing inside the backticked text.

import reactmarkdown from "react-markdown";
import gfm from 'remark-gfm';

const postcontent = () => {

    const source = `
# hello, world!
---
~this doesn't work.~
`
    return (
        <reactmarkdown remarkplugins={[gfm]} children={source} />
    );
};

export default postcontent;

enter image description here

score:1

this appears to be a whitespace issue, you've too much.

this doesn't work:

const postcontent = () => {
    const source = `
        # hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <reactmarkdown remarkplugins={[gfm]} children={source} />
    );
};

this works:

const postcontent = () => {
  const source = `
# hello, world!
---
~this doesn't work.~
`;
  return <reactmarkdown remarkplugins={[gfm]} children={source} />;
};

notice the "leading" whitespace per line is removed

edit problem-with-rendering-markdown-in-nextjs-react

enter image description here


Related Query

More Query from same tag