how to use diff editor correctly?

[c1240539157]

Problem

I want to use diffEditor to show the difference between two different contents.
however It went wrong. only display the content not showing any different changes.

Detail the problem here, including any possible solutions.

Sample code to reproduce your issue

import { diff as DiffEditor } from 'react-ace';
import brace from 'brace';

import 'brace/mode/json';
import 'brace/mode/html';
import 'brace/theme/github';
import 'brace/theme/monokai';
import 'brace/ext/language_tools';

export default class DiffChange extends Component {

  render() {

    return (
      <div>
        <div className={styles.container}>
            <DiffEditor
              value={[sceneCompDiff.changedContent, sceneCompDiff.originalContent]}
              mode="json"
              enableBasicAutocompletion
              enableLiveAutocompletion
              highlightActiveLine
              showGutter
              showPrintMargin
              wrapEnabled
              readOnly
              width="100%"
              height="700px"
              theme="github"
              setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                showConnectors: true,
                readOnly: true,
                tabSize: 2,
              }}
            />
         
        </div>
      </div>
    );
  }
}

References

Progress on: #

[UlyC]

same issue

[UlyC]

:global .codeMarker {
    background-color: #ffff99 ;
    position: absolute ;
    z-index: 20;
}

It worked for me.