Improve Documentation Readability and Simplify Onboarding Experience

content/components/code.mdx

@@ -4,98 +4,132 @@ description: "Display code with optional syntax highlighting"
 icon: "code"
 ---
 
-<RequestExample>
+Display code snippets with advanced features like syntax highlighting, line highlighting, and custom labels.
 
-````md Code Block Example
-```javascript Code Block Example
-const hello = "world";
-```
-````
-
-</RequestExample>
+## Basic Usage
 
-## Basic Code Block
-
-Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks.
+Add code by wrapping it in three backticks (```). This is known as a fenced code block.
 
 ```
-helloWorld();
+console.log("Hello World");
 ```
 
-````md
-```
-helloWorld();
+```md Example
+\```
+console.log("Hello World");
+\```
 ```
-````
 
-## Syntax Highlighting
+## Adding Language Syntax
 
-Put the name of your programming language after the three backticks to get syntax highlighting.
+Make your code blocks prettier by adding syntax highlighting. Just add the language name after the first three backticks.
 
-We use [Prism](https://prismjs.com/#supported-languages) for syntax highlighting. [Test Drive Prism](https://prismjs.com/test.html#language=markup) lists all the languages supported.
-
-```java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
+```javascript
+// User data example
+const user = {
+  name: "John",
+  age: 30,
+  isAdmin: false
+};
 ```
 
-````md
-```java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
+```md Example
+\```javascript
+// User data example
+const user = {
+  name: "John",
+  age: 30,
+  isAdmin: false
+};
+\```
 ```
-````
 
-## Names
+<Tip>
+  We support many programming languages including JavaScript, Python, Java, Ruby, and more through [Prism](https://prismjs.com/#supported-languages). Check the full list at [Test Drive Prism](https://prismjs.com/test.html#language=markup).
+</Tip>
+
+## Adding Labels
 
-You can add more text 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.
+Add a label to your code block by putting text after the language name. This helps identify what the code example is showing.
 
-```javascript Code Block Example
-const hello = "world";
+```python Configuration Example
+# Set up database connection
+DB_HOST = "localhost"
+DB_USER = "admin"
+DB_PASS = "secretpassword"
 ```
 
-````md Code Block Example
-```javascript Code Block Example
-const hello = "world";
+```md Example
+\```python Configuration Example
+# Set up database connection
+DB_HOST = "localhost"
+DB_USER = "admin"
+DB_PASS = "secretpassword"
+\```
 ```
-````
 
-## Line Highlighting
+## Highlighting Important Lines
 
-You can 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.
+Draw attention to specific lines by adding line numbers in curly braces after the label. You can highlight:
+- Single lines: `{1}`
+- Multiple lines: `{1,3}`
+- Line ranges: `{1-3}`
 
-```javascript Line Highlighting Example {1,3-5}
-const greeting = "Hello, World!";
-function sayHello() {
-  console.log(greeting);
+```javascript Line Highlighting {1,3-4}
+const API_KEY = "abc123"; // This line is highlighted
+function getData() {
+  // These lines are highlighted
+  fetch(`/api/data?key=${API_KEY}`)
+    .then(response => response.json());
 }
-sayHello();
 ```
 
-````md
-```javascript Line Highlighting Example {1,3-5}
-const greeting = "Hello, World!";
-function sayHello() {
-  console.log(greeting);
+```md Example
+\```javascript Line Highlighting {1,3-4}
+const API_KEY = "abc123";
+function getData() {
+  // These lines are highlighted
+  fetch(`/api/data?key=${API_KEY}`)
+    .then(response => response.json());
 }
-sayHello();
+\```
 ```
-````
 
-## Code Groups
+## Multiple Code Examples
 
-Want to display multiple code examples in one code box? Check out the Code Group docs:
+Need to show code in different languages? Use Code Groups to organize multiple examples:
 
 <Card
-  title="Code Group"
+  title="Code Groups"
   href="/content/components/code-groups"
   icon="columns-3"
 >
-  Read the reference for the Code Group component
+  Learn how to group multiple code examples together
 </Card>
+
+## Common Use Cases
+
+Here are some typical ways to use code blocks:
+
+### API Examples
+```javascript
+fetch('https://api.example.com/data', {
+  headers: {
+    'Authorization': 'Bearer YOUR_TOKEN'
+  }
+});
+```
+
+### Configuration Files
+```yaml
+version: 1.0
+settings:
+  theme: dark
+  notifications: true
+```
+
+### Command Line Instructions
+```bash
+npm install mintlify
+mintlify dev
+```