Skip to main content
Logo

Code compare / diff editor

Code compare enables you to look at changes between your edit version of a source code file and any previously published versions, allowing you to see any changes that have taken place. It works like any traditional diff editor highlighting line changes in the file. Green for new lines added and red for code that has been removed.

Viewing changes

To use code comparison you'll need a source code file like a Razor view or CSS file that has at least two versions.

  1. Locate a source code file within the Project explorer, press on it and select Edit in the contextual menu. The Source editor will be displayed.
  2. If the content you have open has at least two versions you'll see a button labelled Diff editor in the toolbar. Pressing the Diff editor button will open the Compare view and the Compare and Current versions will be shown side by side.

    The left hand pane displays the previous versions of the source code. You can choose different versions of the file using the version dropdown menu in the toolbar.

  3. The right hand pane is fixed to the current edit version of the file and is editable. Make your changes here and press the Save button. 

    The file will not be updated on your live site until it has been submitted and approved.

Making changes

It is possible to make changes using the compare view. The right hand pane always shows the current edit version of the file and is editable.

  • As line changes are highlighted in compare view, you can easily copy and paste code that may have been removed from a file to reinstate it.
  • You can type over existing content to make a change.
  • You can also revert to a previous version of the file by using the Revert to selected version button. Note that you will lose any changes you may have made in the right hand pane.