diff --git a/code.mdx b/code.mdx
index c99251a97..a8edeb3f7 100644
--- a/code.mdx
+++ b/code.mdx
@@ -2,11 +2,14 @@
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 (\`).
@@ -14,11 +17,11 @@ 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 blocks
-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 to enable meta options. Add any meta options after the language.
-```java HelloWorld.java
+```java HelloWorld.java lines icon="java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
@@ -27,7 +30,7 @@ class HelloWorld {
```
````mdx
-```java HelloWorld.java
+```java HelloWorld.java lines icon="java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
@@ -36,9 +39,23 @@ class HelloWorld {
```
````
-## Syntax Highlighting
+## Code block options
+
+You can add meta options to your code blocks to customize their appearance.
+
+
+ You must specify a programming language for a code block before adding any other meta options.
+
+
+### 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.
+
+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 {
@@ -58,124 +75,36 @@ class HelloWorld {
```
````
-### Languages
-
-We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax:
-
-
-
-
- | Language |
- ID |
-
-
-
-
- | Bash |
- bash |
-
-
- | Laravel Blade |
- blade |
-
-
- | C |
- c |
-
-
- | C++ |
- c++ |
-
-
- | C# |
- c# |
-
-
- | Dart |
- dart |
-
-
- | Go |
- go |
-
-
- | Java |
- java |
-
-
- | JavaScript |
- javascript |
-
-
- | JSON |
- json |
-
-
- | JSX |
- jsx |
-
-
- | Kotlin |
- kotlin |
-
-
- | Log |
- log |
-
-
- | Markdown |
- markdown |
-
-
- | PHP |
- php |
-
-
- | Python |
- python |
-
-
- | Ruby |
- ruby |
-
-
- | Swift |
- swift |
-
-
- | TypeScript |
- typescript |
-
-
- | TSX |
- tsx |
-
-
- | YAML |
- yaml |
-
-
-
-
-## 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";
```
-````mdx Code Block Example
+````mdx
```javascript Code Block Example
const hello = "world";
```
````
-## Line Highlighting
+### Icon
+Add an icon to your code block. You can use [FontAwesome](https://fontawesome.com/icons) icons, [Lucide](https://lucide.dev/icons/) icons, or absolute URLs.
-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.
+```javascript icon="square-js"
+const hello = "world";
+```
-```javascript Line Highlighting Example {1,3-5}
+````mdx
+```javascript icon="square-js"
+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-2,5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
@@ -184,7 +113,7 @@ sayHello();
```
````mdx
-```javascript Line Highlighting Example {1,3-5}
+```javascript Line Highlighting Example highlight={1-2,5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
@@ -193,11 +122,52 @@ sayHello();
```
````
-## Expandable
+### 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}
+const greeting = "Hello, World!";
+function sayHello() {
+ console.log(greeting);
+}
+sayHello();
+```
+
+````mdx
+```javascript Line Focus Example focus={2,4-5}
+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.
+### Show line numbers
+Display line numbers on the left side of your code block using `lines`.
-```python library.py [expandable]
+```javascript Show Line Numbers Example lines
+const greeting = "Hello, World!";
+function sayHello() {
+ console.log(greeting);
+}
+sayHello();
+```
+
+````mdx
+```javascript Show Line Numbers Example lines
+const greeting = "Hello, World!";
+function sayHello() {
+ console.log(greeting);
+}
+sayHello();
+```
+````
+
+### Expandable
+Allow users to expand and collapse long code blocks using `expandable`.
+
+```python Expandable Example expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass
@@ -288,8 +258,32 @@ if __name__ == "__main__":
```
````mdx
-```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();
+```
+
+````mdx
+```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);
}