Docs updates for new Codeblock v3 docs

code.mdx

@@ -2,21 +2,24 @@
 title: "Code"
 description: "Display inline code and code blocks"
 icon: "code"
+tag: "NEW"
 ---
 
-## Basic
+## Adding code samples
 
-### Inline Code
+You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.
+
+### Inline code
 
 To denote a `word` or `phrase` as code, enclose it in backticks (\`).
 
 ```
 To denote a `word` or `phrase` as code, enclose it in backticks (`).
 ```
 
-### Code Block
+### Code block
 
-Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming 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 add any meta options after the language.
 
 ```java HelloWorld.java
 class HelloWorld {
@@ -36,9 +39,13 @@
 ```
 ````
 
-## Syntax Highlighting
+#### Option syntax
+
+* **String and boolean options**: Wrap with `""`, `''`, or no quotes.
+* **Expression options**: Wrap with `{}`, `""`, or `''`.
 
-Enable syntax highlighting by adding the language name after the opening backticks of a code snippet.
+## Syntax highlighting
+Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
 
 ```java
 class HelloWorld {
@@ -60,7 +67,7 @@
 
 ### Languages
 
-We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax:
+We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard Markdown syntax:
 
 <table className="border-collapse">
  <thead>
@@ -157,9 +164,8 @@
  </tbody>
 </table>
 
-## Names
-
-Add a title after the programming language to set the name of your code example. The text can be anything as long as its all in one line.
+## 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
 const hello = "world";
@@ -171,11 +177,44 @@
 ```
 ````
 
+## Icon
+Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs.
+
+```javascript icon="js"
+const hello = "world";
+```
+
+````md icon="js"
+```javascript icon="globe"
+const hello = "world";
+```
+````
+
 ## 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,3-5}
+const greeting = "Hello, World!";
+function sayHello() {
+  console.log(greeting);
+}
+sayHello();
+```
+
+````md
+```javascript Line Highlighting Example highlight={1,3-5}
+const greeting = "Hello, World!";
+function sayHello() {
+  console.log(greeting);
+}
+sayHello();
+```
+````
 
-Highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces `{}` and specify line numbers or ranges separated by commas.
+## Line focusing
+Focus on specific lines in your code blocks using `focus` with line numbers or ranges.
 
-```javascript Line Highlighting Example {1,3-5}
+```javascript Line Focus Example focus={2,4-5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -184,7 +223,7 @@
 ```
 
 ````md
-```javascript Line Highlighting Example {1,3-5}
+```javascript Line Focus Example focus={2,4-5}
 const greeting = "Hello, World!";
 function sayHello() {
   console.log(greeting);
@@ -193,11 +232,31 @@
 ```
 ````
 
-## Expandable
+## Show line numbers
+Display line numbers on the left side of your code block using `lines`.
+
+```javascript Show Line Numbers Example lines
+const greeting = "Hello, World!";
+function sayHello() {
+  console.log(greeting);
+}
+sayHello();
+```
+
+````md
+```javascript Show Line Numbers Example lines
+const greeting = "Hello, World!";
+function sayHello() {
+  console.log(greeting);
+}
+sayHello();
+```
+````
 
-If you have a long code block and `[expandable]` after your title to make it close and expand.
+## Expandable
+Allow users to expand and collapse long code blocks using `expandable`.
 
-```python library.py [expandable]
+```python Expandable Example expandable
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional
 from dataclasses import dataclass
@@ -288,8 +347,32 @@
 ```
 
 ````md
-```javascript Expandable Example [expandable]
-const greeting = "Hello, World!";
+```python Expandable Example expandable
+from datetime import datetime, timedelta
+from typing import Dict, List, Optional
+from dataclasses import dataclass
+
+# ...
+
+if __name__ == "__main__":
+    main()
+```
+````
+
+## Wrap
+Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
+
+```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();
+```
+
+````md
+```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);
 }