Document codeblock deep-linking feature

Add documentation for the new deep-linking feature in code blocks that allows defining a links map to make specific text clickable. Includes examples for exact string matching, regex pattern matching, and combining both approaches.

Co-Authored-By: Catherine Deskur <[email protected]>

Author: devin-ai-integration[bot]

fern/products/docs/pages/component-library/default-components/code-blocks.mdx

@@ -303,11 +303,112 @@ To disable scrolling and wrap overflow onto the next line, use the `wordWrap` pr
 </Tabs>
 
 
+## Deep-linking
+
+You can make specific text within code blocks clickable by defining a `links` map. This is useful for linking to documentation, API references, or related resources directly from your code examples.
+
+The `links` property accepts a map where keys are matching patterns (exact strings or regex) and values are the URLs to link to.
+
+### Exact string matching
+
+<Tabs>
+  <Tab title="Example">
+    ```typescript links={"PlantClient": "https://example.com/api/plant-client", "createPlant": "https://example.com/api/create-plant"}
+    import { PlantClient } from "@plantstore/sdk";
+
+    const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+    const plant = await client.createPlant({
+      name: "Monstera",
+      species: "Monstera deliciosa"
+    });
+    ```
+  </Tab>
+  <Tab title="Markdown">
+    ````markdown
+    ```typescript links={"PlantClient": "https://example.com/api/plant-client", "createPlant": "https://example.com/api/create-plant"}
+    import { PlantClient } from "@plantstore/sdk";
+
+    const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+    const plant = await client.createPlant({
+      name: "Monstera",
+      species: "Monstera deliciosa"
+    });
+    ```
+    ````
+
+    <Note>
+      The `links` property uses JSON format. Each key in the map is matched exactly against text in the code block, and matching text becomes a clickable link to the corresponding URL.
+    </Note>
+  </Tab>
+</Tabs>
+
+### Regex pattern matching
+
+You can use regex patterns for more flexible matching. This is useful when you want to link multiple variations or patterns of text.
+
+<Tabs>
+  <Tab title="Example">
+    ```python links={"Plant\\w+": "https://example.com/api/plant-models", "create_\\w+": "https://example.com/api/create-methods"}
+    from plantstore import PlantClient, PlantConfig
+
+    client = PlantClient(api_key="YOUR_API_KEY")
+    plant = client.create_plant(
+        name="Fiddle Leaf Fig",
+        species="Ficus lyrata"
+    )
+    ```
+  </Tab>
+  <Tab title="Markdown">
+    ````markdown
+    ```python links={"Plant\\w+": "https://example.com/api/plant-models", "create_\\w+": "https://example.com/api/create-methods"}
+    from plantstore import PlantClient, PlantConfig
+
+    client = PlantClient(api_key="YOUR_API_KEY")
+    plant = client.create_plant(
+        name="Fiddle Leaf Fig",
+        species="Ficus lyrata"
+    )
+    ```
+    ````
+
+    <Note>
+      When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string.
+    </Note>
+  </Tab>
+</Tabs>
+
+### Combining exact and regex patterns
+
+You can mix exact string matching and regex patterns in the same `links` map:
+
+<Tabs>
+  <Tab title="Example">
+    ```javascript links={"fetchPlants": "https://example.com/api/fetch", "Plant\\w+": "https://example.com/api/types"}
+    async function fetchPlants() {
+      const response = await fetch('/api/plants');
+      const data: PlantResponse = await response.json();
+      return data.plants;
+    }
+    ```
+  </Tab>
+  <Tab title="Markdown">
+    ````markdown
+    ```javascript links={"fetchPlants": "https://example.com/api/fetch", "Plant\\w+": "https://example.com/api/types"}
+    async function fetchPlants() {
+      const response = await fetch('/api/plants');
+      const data: PlantResponse = await response.json();
+      return data.plants;
+    }
+    ```
+    ````
+  </Tab>
+</Tabs>
+
 ## Combining props
 
-You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, and `wordWrap`
+You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, `wordWrap`, and `links`
 props to create a code block with a title, highlighted lines, specific starting line,
-and a maximum height.
+a maximum height, and clickable links.
 
 <Tabs>
   <Tab title="Example">