Update code diff example (#929)

* clarify diff setup

* update example to `text`

Author: ethanpalm

code.mdx

@@ -302,7 +302,19 @@ 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]`.
+Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red.
+
+To create diffs, add these special comments at the end of lines in your code block:
+
+- `// [!code ++]`: Mark a line as added (green highlight).
+- `// [!code --]`: Mark a line as removed (red highlight).
+
+For multiple consecutive lines, specify the number of lines after a colon:
+
+- `// [!code ++:3]`: Mark the current line plus the next two lines as added.
+- `// [!code --:5]`: Mark the current line plus the next four lines as removed.
+
+The comment syntax must match your programming language (for example, `//` for JavaScript or `#` for Python).
 
 ```js Diff Example icon="code" lines
 const greeting = "Hello, World!"; // [!code ++]
@@ -313,12 +325,12 @@ function sayHello() {
 sayHello();
 ```
 
-````mdx
+````text
 ```js Diff Example icon="code" lines
-const greeting = "Hello, World!"; // [\!code ++]
+const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
-  console.log("Hello, World!"); // [\!code --]
-  console.log(greeting); // [\!code ++]
+  console.log("Hello, World!"); // [!code --]
+  console.log(greeting); // [!code ++]
 }
 sayHello();
 ```