Use react-ace diff component cannot showing the diff change

Question

I want to show the different change between two side contents, but the results are not showing what I expect them to. No changes are showing.

The version I am using of react-ace is 7.0.5.

Can some one tell which point I missed.

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>
    );
  }
}

Answer 1

You might need to add a CSS class, e.g.:

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

At least, this solved the same problem in my case.
See also https://github.com/securingsincity/react-ace/blob/master/example/diff.css.

(It was hard to find this for me as well)