Code Diffs was something I wanted to use for a while in Hashnode but I didn't know that it was already there to be used in markdown. The way you can implement this is like follows:

```diff
+ const port = process.env.PORT || 3000;
- app.listen(3000, () => {
-   console.log(`🚀 Server started on port 3000`)
- }
+ app.listen(port, () => {
+   console.log(`🚀 Server started on port ${port}`);
+ });
```

This example is from on of my articles.

So, the way this works is, hashnode uses a plugin called highlight.js to convert the codeblocks. Highlight.js already has this feature implemented. Now this looks like this:

You can definitely go forward with this, but the colors and design wasn't something I was satisfied with. So, I decided to tweak my custom css to make it look better.

You can get access to Hashnode's Custom CSS feature by becoming a Hashnode Ambassador

I added the following to my custom css:

.hljs-addition {
    color: green !important;
    box-shadow: inset 10.5px 0 green !important;
    padding: 4.4px 0 !important;
    background: rgb(0, 255, 0, 0.1);
}

.hljs-deletion {
    color: red !important;
    box-shadow: inset 10.5px 0 red !important;
    padding: 4.4px 0 !important;
    background: rgb(255, 0, 0, 0.2);
}

Now, this definitely can be refactored a little bit, but this is what I got:

Now, I'm pretty satisfied with this! You can go ahead and use this feature and you're welcome to use my custom css and if you want tweak it a little bit and I would love to see your implementation in the comments!

NOTE: This has one drawback that I couldn't find a way where you could have both the diff highlighting and the syntax highlighting for a certain language together in a code block. That is something we might have to wait for @Hashnode to implement, if they do.