CODEWITHSUNDEEP
reactjscompare
Mani DS
Mani DS

Reputation: 21

Comparing Rendered Markdown Text in React with react-diff-view

I'm working on a React project where I need to compare two different Markdown texts and display the differences in their rendered versions. Currently, I am using react-diff-viewer, but it only compares the raw text without rendering it. I want to compare the rendered Markdown to highlight the differences.

Here's the code I'm using with react-diff-view:

import ReactDiffViewer from 'react-diff-viewer';

const TextComparer = ({ oldText, newText }) => {
  return (
    <ReactDiffViewer oldValue={oldText} newValue={newText} splitView />
  );
};

However, this only shows the differences in the raw text, not the rendered Markdown.

Desired Outcome:

I want to compare the rendered Markdown of two texts and highlight the differences. Are there any libraries or approaches that can help me achieve this in React?

I've considered react-diff-viewer, but it seems to focus on comparing raw text. Is there a way to customize it or another library that allows comparing the rendered Markdown directly?

I have also prepared an example image to illustrate what I am trying to achieve. Any guidance or code examples would be greatly appreciated! Thank you.

image

Upvotes: 2

Views: 402

Answers (0)

Related Questions