add diff in code block (#823)

* add diff in code block

* Update code.mdx

Co-authored-by: Ethan Palm <[email protected]>

---------

Co-authored-by: Ethan Palm <[email protected]>

Author: dks333

code.mdx

@@ -58,7 +58,7 @@ You can add meta options to your code blocks to customize their appearance.
 
 Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
 
-We use Shiki for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.
+We use [Shiki](https://shiki.style/) for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.
 
 ```java
 class HelloWorld {
@@ -300,3 +300,27 @@ function sayHello() {
 sayHello();
 ```
 ````
+
+### Diff
+
+Add single line comments with `[!code ++]` and `[!code --]` to mark added and removed lines. You can also mark multiple lines with a single comment, such as `[!code ++:3]` or `[!code --:5]`.
+
+```js Diff Example icon="code" lines
+const greeting = "Hello, World!"; // [!code ++]
+function sayHello() {
+  console.log("Hello, World!"); // [!code --]
+  console.log(greeting); // [!code ++]
+}
+sayHello();
+```
+
+````mdx
+```js Diff Example icon="code" lines
+const greeting = "Hello, World!"; // [\!code ++]
+function sayHello() {
+  console.log("Hello, World!"); // [\!code --]
+  console.log(greeting); // [\!code ++]
+}
+sayHello();
+```
+````