diff --git a/code.mdx b/code.mdx
index c89d9da7c..f0854a5aa 100644
--- a/code.mdx
+++ b/code.mdx
@@ -22,7 +22,9 @@ Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-c
 
 Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.
 
-```java HelloWorld.java lines icon="java"
+<CodeGroup>
+
+```java HelloWorld.java example lines icon="java"
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
@@ -30,7 +32,7 @@ class HelloWorld {
 }
 ```
 
-````mdx
+````mdx Format
 ```java HelloWorld.java lines icon="java"
 class HelloWorld {
     public static void main(String[] args) {
@@ -40,6 +42,8 @@ class HelloWorld {
 ```
 ````
 
+</CodeGroup>
+
 ## Code block options
 
 You can add meta options to your code blocks to customize their appearance.
@@ -59,7 +63,9 @@ Enable syntax highlighting by specifying the programming language after the open
 
 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
+<CodeGroup>
+
+```java Syntax highlighting example
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
@@ -67,7 +73,7 @@ class HelloWorld {
 }
 ```
 
-````mdx
+````mdx Format
 ```java
 class HelloWorld {
     public static void main(String[] args) {
@@ -76,13 +82,14 @@ class HelloWorld {
 }
 ```
 ````
+</CodeGroup>
 
 ### Twoslash
 
 In JavaScript and TypeScript code blocks, use `twoslash` to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE. 
 
-
-```ts title="Twoslash Example" twoslash
+<CodeGroup>
+```ts twoslash Twoslash example
 type Pet = "cat" | "dog" | "hamster";
 
 function adoptPet(name: string, type: Pet) {
@@ -93,52 +100,58 @@ function adoptPet(name: string, type: Pet) {
 const message = adoptPet("Mintie", "cat");
 ```
 
-````mdx
-```ts title="Twoslash Example" twoslash
+````mdx Format
+```ts twoslash
 type Pet = "cat" | "dog" | "hamster";
 
 function adoptPet(name: string, type: Pet) {
-  return `${name} the ${type} is now adopted! 🎉`;
+  return `${name} the ${type} is now adopted!`;
 }
 
 // Hover to see the inferred types
 const message = adoptPet("Mintie", "cat");
 ```
 ````
+</CodeGroup>
 
 ### Title
 
 Add a title to label your code example. Use `title="Your title"` or a string on a single line.
 
-```javascript Code Block Example
+<CodeGroup>
+```javascript Title example
 const hello = "world";
 ```
 
-````mdx
-```javascript Code Block Example
+````mdx Format
+```javascript Title example
 const hello = "world";
 ```
 ````
+</CodeGroup>
 
 ### Icon
 
 Add an icon to your code block using the `icon` property. See [Icons](/components/icons) for all available options.
 
-```javascript icon="square-js"
+<CodeGroup>
+```javascript Icon example icon="square-js"
 const hello = "world";
 ```
 
-````mdx
+````mdx Format
 ```javascript icon="square-js"
 const hello = "world";
 ```
 ````
+</CodeGroup>
 
-### Line Highlighting
+### Line highlighting
 
 Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.
 
-```javascript Line Highlighting Example highlight= {1-2,5}
+<CodeGroup>
+```javascript Line highlighting example highlight= {1-2,5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -146,8 +159,8 @@ function sayHello() {
 sayHello();
 ```
 
-````mdx
-```javascript Line Highlighting Example highlight={1-2,5}
+````mdx Format
+```javascript highlight={1-2,5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -155,12 +168,14 @@ function sayHello() {
 sayHello();
 ```
 ````
+</CodeGroup>
 
 ### Line focusing
 
 Focus on specific lines in your code blocks using `focus` with line numbers or ranges.
 
-```javascript Line Focus Example focus= {2,4-5}
+<CodeGroup>
+```javascript Line focus example focus= {2,4-5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -168,8 +183,8 @@ function sayHello() {
 sayHello();
 ```
 
-````mdx
-```javascript Line Focus Example focus={2,4-5}
+````mdx Format
+```javascript focus={2,4-5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -177,12 +192,14 @@ function sayHello() {
 sayHello();
 ```
 ````
+</CodeGroup>
 
 ### Show line numbers
 
 Display line numbers on the left side of your code block using `lines`.
 
-```javascript Show Line Numbers Example lines
+<CodeGroup>
+```javascript Show line numbers example lines
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -190,8 +207,8 @@ function sayHello() {
 sayHello();
 ```
 
-````mdx
-```javascript Show Line Numbers Example lines
+````mdx Format
+```javascript lines
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -199,12 +216,14 @@ function sayHello() {
 sayHello();
 ```
 ````
+</CodeGroup>
 
 ### Expandable
 
 Allow users to expand and collapse long code blocks using `expandable`.
 
-```python Expandable Example expandable
+<CodeGroup>
+```python Expandable example expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -294,8 +313,8 @@ if __name__ == "__main__":
     main()
 ```
 
-````mdx
-```python Expandable Example expandable
+````text Format
+```python expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -306,12 +325,14 @@ if __name__ == "__main__":
     main()
 ```
 ````
+</CodeGroup>
 
 ### Wrap
 
 Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
 
-```javascript Wrap Example wrap
+<CodeGroup>
+```javascript Wrap example wrap
 const greeting = "Hello, World! I am a long line of text that will wrap to the next line.";
 function sayHello() {
   console.log(greeting);
@@ -319,8 +340,8 @@ function sayHello() {
 sayHello();
 ```
 
-````mdx
-```javascript Wrap Example wrap
+````mdx Format
+```javascript wrap
 const greeting = "Hello, World! I am a long line of text that will wrap to the next line.";
 function sayHello() {
   console.log(greeting);
@@ -328,6 +349,7 @@ function sayHello() {
 sayHello();
 ```
 ````
+</CodeGroup>
 
 ### Diff
 
@@ -345,7 +367,8 @@ For multiple consecutive lines, specify the number of lines after a colon:
 
 The comment syntax must match your programming language (for example, `//` for JavaScript or `#` for Python).
 
-```js Diff Example icon="code" lines
+<CodeGroup>
+```js Diff example lines
 const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
   console.log("Hello, World!"); // [!code --]
@@ -354,8 +377,8 @@ function sayHello() {
 sayHello();
 ```
 
-````text
-```js Diff Example icon="code" lines
+````text Format
+```js lines
 const greeting = "Hello, World!"; // [!code ++]
 function sayHello() {
   console.log("Hello, World!"); // [!code --]
@@ -363,4 +386,5 @@ function sayHello() {
 }
 sayHello();
 ```
-````
\ No newline at end of file
+````
+</CodeGroup>