group code block options

Author: ethanpalm

code.mdx

@@ -19,7 +19,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`).
 
 ### Code block
 
-Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Specify the programming language for syntax highlighting, and add any meta options after the language.
+Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Specify the programming language for syntax highlighting and to enable meta options. Add any meta options after the language.
 
 ```java HelloWorld.java
 class HelloWorld {
@@ -39,14 +39,24 @@ class HelloWorld {
 ```
 ````
 
-#### Option syntax
+## Code block options
+
+You can add meta options to your code blocks to customize their appearance.
+
+<Note>
+  You must specify a programming language for a code block before adding any other meta options.
+</Note>
+
+### Option syntax
 
 * **String and boolean options**: Wrap with `""`, `''`, or no quotes.
 * **Expression options**: Wrap with `{}`, `""`, or `''`.
 
-## Syntax highlighting
+### Syntax highlighting
 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.
+
 ```java
 class HelloWorld {
     public static void main(String[] args) {
@@ -65,11 +75,7 @@ class HelloWorld {
 ```
 ````
 
-### Languages
-
-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.
-
-## Title
+### Title
 Add a title after the programming language to label your code example. Titles can be any string on a single line.
 
 ```javascript Code Block Example
@@ -82,7 +88,7 @@ const hello = "world";
 ```
 ````
 
-## Icon
+### Icon
 Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs.
 
 ```javascript icon="square-js"
@@ -95,7 +101,7 @@ const hello = "world";
 ```
 ````
 
-## 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}
@@ -116,7 +122,7 @@ sayHello();
 ```
 ````
 
-## Line focusing
+### 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}
@@ -137,7 +143,7 @@ sayHello();
 ```
 ````
 
-## Show line numbers
+### Show line numbers
 Display line numbers on the left side of your code block using `lines`.
 
 ```javascript Show Line Numbers Example lines
@@ -158,7 +164,7 @@ sayHello();
 ```
 ````
 
-## Expandable
+### Expandable
 Allow users to expand and collapse long code blocks using `expandable`.
 
 ```python Expandable Example expandable
@@ -264,7 +270,7 @@ if __name__ == "__main__":
 ```
 ````
 
-## Wrap
+### Wrap
 Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
 
 ```javascript Wrap Example wrap