home

Code block diffs

Word count icon

117 words

Reading time icon

1 minutes

I recently found myself wanting to show diffs in my code blocks. You know the ones, some + and - that are colour coded. The use case is that you are writing a tutorial piece and want to explain to the reader some concept then you want to add to that or show an alternative way of doing it. Let's take a look by creating a silly function.

TypeScript icon
function CreatePerson({name: string, age: number}) {
return {
name,
age
}
}
Git Icon
- function CreatePerson({name: string, age: number}) {
+ function CreatePerson({name: string, age: number, favoriteColour: string}) {
return {
name,
- age
+ age,
+ favoriteColour
}
}

So this is possible by literally adding a - where you want to show the line that is being replaced, and a + for the line that is added/changed. You'll also need to add the diff keyword to the codeblock as a variable as you would to define the langue of the codeblock.