How to show changed edited lines (diff) in monaco editor without using the split mode diff editor?

Question

I'm trying to achieve something like this in monaco editor. Is there a way I can achieve this kind of notifying the changed lines in monaco without using DiffEditor (the one that shows in split mode?)

TIA.

I'm looking for exact experience as how vscode notifies of changed lines inline.

Answer 1

I don't know if you can achieve that with the regular Editor, but the DiffEditor does allow you to show changes inline:

var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
    // Render the diff inline
    renderSideBySide: false
});

Answer 2

Use option renderSideBySide

 <DiffEditor
     original={text1}
     modified={text2}
     options={{ renderSideBySide: false }}
     language={language}
 />