npm install react-text-diff Usage import {Component} from'react'; import CodeDiff from'react-text-diff'; class Demo extends Component{ constructor(props){ super(props); this.state ={ oldStr: oldStr, newStr: newStr, context: 100000, // max 100000 ...
A simple and beautiful text diff viewer component made with Diff and React. - praneshr/react-diff-viewer
➕➖ The react component to generate pretty HTML for comparing commits or text. - neighborhood999/react-gh-like-diff
{ - .text-balance { - text-wrap: balance; - } -} +@tailwind utilities; \ No newline at end of file diff --git a/src/app/layout.js b/src/app/layout.js index 9aef1df..e757b33 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,17 +1,23 @@ import { ...
+ "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "cross-env": "^7.0.3" + } +} diff --git a/src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx b/src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx new file mode 100644 index 00000...
languages.javascript), }} /> ); render = () => { return ( <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} renderContent={this.highlightSyntax} /> ); }; } Text block diff comparison Different styles of text block diffing are possible by using the enums ...