renderContent is not able to handle the markdown based content

[Udayendu]

Issue:

renderContent is not able to render the markdown based content. I am using the MdPreview editor from md-editor-rt. When I am trying to render the markdown based code, its not able to manage the spaces properly and breaking the view by adding many '\n' between lines.

Reference Code

const MarkdownDiffViewer = ({ original, edited }) => {
    return (
      <div>
        <ReactDiffViewer
          newValue={edited}
          oldValue={original}
          splitView={true}
          leftTitle={version}
          rightTitle="latest"
          renderContent={(text) => (
            <MdPreview
              modelValue={text}
              language="en-US"
              previewTheme="github"
            />
          )}
        />
      </div>
    );
  };

<MarkdownDiffViewer
     edited={newcontent}
     original={oldcontent}
 />

Code is completely out of the code block. Is it supported to use markdown rendering using this tool ?

Actual output

[Aeolun]

I think this is related to the way markdown is rendered when compiled. It turns into HTML that has it’s own styling aside from color. Diff viewer is build for comparing code files, so it looks kind of wonky.

I’m honestly kind of surprised it works as well as it does.

If you merely highlight the markdown syntax it should work fine.

[Udayendu]

Thanks @Aeolun for the update. I was also thinking the same but didn't get time to test other editor. I will switch the editor and see if the issue is reproducible. I will update you in a day or two.