🌿 Fern Scribe: Add that code snippets with maxlines has an auto e...

changelog-entries/2025-08-15-issue-470.md

@@ -0,0 +1,21 @@
+# Changelog Entry - Issue #470
+
+**Date**: 2025-08-15
+**Priority**: Medium
+**Issue**: Add that code snippets with maxlines has an auto expandable option on desktop
+
+## Entry
+
+Here's a formatted changelog entry for the documentation update:
+
+- **[Docs]** Added information about auto-expandable code snippets with `maxlines` property on desktop displays
+
+## Files Updated
+
+- `fern/products/docs/pages/changelog/2024/3/24.mdx`
+- `fern/products/docs/docs.yml`
+- `fern/products/docs/pages/writing-content/code-blocks.mdx`
+- `fern/products/docs/docs.yml`
+
+---
+*Generated by Fern Scribe for issue #470*

fern/products/docs/docs.yml

@@ -9,6 +9,8 @@ navigation:
         path: ./pages/getting-started/project-structure.mdx
       - link: Customer Showcase
         href: https://buildwithfern.com/showcase#docs-customers.alldocs-features
+      - page: Code Blocks
+        path: ./pages/writing-content/code-blocks.mdx
   - changelog: ./pages/changelog
     icon: fa-regular fa-clock-rotate-left
   - section: Writing Content
@@ -101,7 +103,7 @@ navigation:
   - section: Preview & Publish
     collapsed: true
     contents:
-      - page: Previewing changes locally 
+      - page: Previewing changes locally
         path: ./pages/getting-started/preview-changes-locally.mdx
       - page: Previewing changes in a PR
         path: ./pages/getting-started/pr-preview.mdx
@@ -181,9 +183,9 @@ navigation:
         path: ./pages/api-references/autopopulate-api-key.mdx
       - page: SSO
         path: ./pages/authentication/sso.mdx
-  -  section: Self-Hosted
-     collapsed: true
-     contents:
+  - section: Self-Hosted
+    collapsed: true
+    contents:
       - page: Overview
         path: ./pages/enterprise/self-hosted.mdx
   - section: Integrations
@@ -210,7 +212,7 @@ navigation:
             path: ./pages/integrations/support/intercom.mdx
       - page: Postman
         path: ./pages/integrations/postman.mdx
-      - page: LaunchDarkly Feature Flags 
+      - page: LaunchDarkly Feature Flags
         path: ./pages/integrations/feature-flags.mdx
   - section: Developer Tools
     collapsed: true
@@ -220,7 +222,6 @@ navigation:
       - page: GitLab
         path: ./pages/developer-tools/gitlab.mdx
       - page: Vale
-        path: ./pages/developer-tools/vale.mdx  
+        path: ./pages/developer-tools/vale.mdx
       - page: View Markdown
         path: ./pages/developer-tools/view-markdown.mdx
-

fern/products/docs/pages/changelog/2024/3/24.mdx

@@ -0,0 +1,22 @@
+---
+title: March 24, 2024
+---
+
+Added code block auto-expand functionality for desktop:
+- When using the `maxLines` prop on code blocks, desktop users will now see an expand/collapse control to view the full content
+- This feature is automatically enabled whenever `maxLines` is used
+- The expand functionality can be disabled via CSS by hiding the selector
+- Note: This feature is currently available for desktop users only
+
+Example:
+```typescript maxLines=3
+function fibonacci(n: number): number {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+// This demonstrates a recursive implementation
+// of the Fibonacci sequence calculation
+// The code will initially show 3 lines
+// and can be expanded to show all lines
+```

fern/products/docs/pages/writing-content/code-blocks.mdx

@@ -0,0 +1,103 @@
+---
+title: "Code Blocks"
+description: "Learn how to enhance your documentation with customizable code blocks featuring syntax highlighting, line highlighting, focusing, and more."
+---
+
+Code blocks are a powerful way to share code examples in your documentation. Fern's code blocks support syntax highlighting, line highlighting, focusing, line numbers, and other customization options.
+
+## Basic Usage
+
+Use three backticks (```) followed by the language name to create a basic code block with syntax highlighting:
+
+```js
+const greeting = "Hello World";
+console.log(greeting);
+```
+
+## Code Block Options
+
+### Syntax Highlighting
+
+Specify the language after the backticks for proper syntax highlighting. Supported languages include:
+- JavaScript/TypeScript (js, ts)
+- Python (py, python)
+- Java
+- JSON
+- YAML
+- Bash/Shell
+- And many more
+
+### Line Numbers
+
+Add the `showLineNumbers` property to display line numbers:
+
+```js showLineNumbers
+function multiply(a, b) {
+  return a * b;
+}
+
+const result = multiply(5, 3);
+console.log(result); // 15
+```
+
+### Line Highlighting
+
+Highlight specific lines using the `{lines}` syntax:
+
+```js {2}
+const users = ['Alice', 'Bob', 'Charlie'];
+users.forEach(user => {
+  console.log(`Hello ${user}!`);
+});
+```
+
+### Focus Mode
+
+Focus on specific lines while dimming others using `focus={lines}`:
+
+```js focus={2-3}
+const fruits = ['apple', 'banana', 'orange'];
+fruits.map(fruit => {
+  return fruit.toUpperCase();
+});
+console.log(fruits);
+```
+
+### Maximum Lines
+
+Use `maxLines` to limit the initial display height of code blocks. On desktop, code blocks with `maxLines` automatically include an expand/collapse button to show the full content:
+
+```js maxLines={3}
+function complexFunction() {
+  // Line 1
+  // Line 2
+  // Line 3
+  // Line 4
+  // Line 5
+  // This will be hidden initially but expandable
+}
+```
+
+<Callout type="info">
+The expand/collapse functionality is currently only available on desktop devices. You can disable this feature by hiding the selector using CSS.
+</Callout>
+
+### Multiple Options
+
+Combine multiple options as needed:
+
+```js showLineNumbers {2} focus={3-4} maxLines={4}
+function example() {
+  const name = "Fern";
+  const greeting = `Hello ${name}!`;
+  console.log(greeting);
+  // Additional lines will be hidden initially
+  // But can be expanded on desktop
+}
+```
+
+## Inline Code
+
+For inline code references, use single backticks: `const example = true`
+
+Remember to use appropriate syntax highlighting and options to make your code examples clear and easy to understand.