Create a Diff in Markdown to Show What Has Changed in a Code Snippet

InstructorAli Spittel

Share this video with your friends

Send Tweet

You can create diffs in markdown to show what has changed in a code snippet. I use this in blog posts to highlight changed lines for readers. This works for code snippets in most markdown packages and on Dev.to.

To show a line of code changing in a function, you can do this:

function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}

First, instead of specifying the programming language, use diff after the backticks. Then at the beginning of any lines of code you want to show as removed, add a -. At the beginning of any lines of code you want to show as added, add a +.

The code would look like this:

```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```