Problem with rendering markdown in NextJS/React

Question

once again I am trying to render markdown in NextJS/React. For some reason my code didn't work, here it is:

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;

Rather than rendering markdown, it outputs the text as normal and as if it were JSON:

Can anyone tell me why this is happening and how to solve it? Thanks!

I can't provide anymore details as this is all the code.

Answer 1

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;

Answer 2

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