Place code examples in CodeGroups

code.mdx

@@ -22,15 +22,17 @@ 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!");
     }
 }
 ```
 
-````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,15 +63,17 @@ 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!");
     }
 }
 ```
 
-````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,118 +100,130 @@ 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);
 }
 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);
 }
 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);
 }
 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);
 }
 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);
 }
 sayHello();
 ```
 
-````mdx
-```javascript Show Line Numbers Example lines
+````mdx Format
+```javascript lines
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
 }
 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,28 +325,31 @@ 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);
 }
 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);
 }
 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,13 +377,14 @@ 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 --]
   console.log(greeting); // [!code ++]
 }
 sayHello();
 ```
-````
+````
+</CodeGroup>