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

[github-actions]

🌿 Fern Scribe Documentation Update

Original Request: Add that code snippets with maxlines has an auto expandable option on desktop

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
• changelog-entries/2025-08-15-issue-470.md

Priority: Medium

Related Discussion: https://buildwithfern.slack.com/archives/C088VLZC0EN/p1754658580869599

Additional Context: No response

⚠️ Files with MDX Validation Issues

The following files could not be updated due to MDX validation failures after 3 attempts:

1. /learn/docs/developer-tools/cursor (Cursor)

• URL: https://fern-api.docs.buildwithfern.com/learn/docs/developer-tools/cursor
• Validation Issues:
  • Mismatched CodeBlock tags: 1 opening, 0 closing
  • Mismatched Accordion tags: 12 opening, 10 closing
  • Mismatched Tab tags: 4 opening, 3 closing
  • Mismatched Card tags: 6 opening, 5 closing

Suggested Content (needs manual MDX fixes):

---
title: Cursor
---

## What is Cursor?

[Cursor](https://www.cursor.com/) is a code editor that uses AI to assist in the code development process.


## Using Cursor with Fern

To optimize your experience with Cursor, you can add instructions to Cursor's system settings:

<Frame>
<img src="./cursor.png" />
</Frame>

<Tip>
  One example of a helpful instruction could be: "Always wrap images in a `<Frame>` component."
</Tip>

### .CursorRules

You can also add project-specific rules to the `.cursorrules` file in the root of your project.

<Accordion title=".cursorrules example">
Here's an example of a `.cursorrules` file used by the team at ElevenLabs:

`````md
You are the world's best documentation writer, renowned for your clarity, precision, and engaging style. Every piece of documentation you produce is:

1. Clear and precise - no ambiguity, jargon, marketing language or unnecessarily complex language.
2. Concise—short, direct sentences and paragraphs.
3. Scientifically structured—organized like a research paper or technical white paper, with a logical flow and strict attention to detail.
4. Visually engaging—using line breaks, headings, and components to enhance readability.
5. Focused on user success — no marketing language or fluff; just the necessary information.

# Writing guidelines

- Titles must always start with an uppercase letter, followed by lowercase letters unless it is a name. Examples: Getting started, Text to speech, Conversational AI...
- No emojis or icons unless absolutely necessary.
- Scientific research tone—professional, factual, and straightforward.
- Avoid long text blocks. Use short paragraphs and line breaks.
- Do not use marketing/promotional language.
- Be concise, direct, and avoid wordiness.
- Tailor the tone and style depending on the location of the content.
  - The `docs` tab (/fern/docs folder) contains a mixture of technical and non-technical content.
    - The /fern/docs/pages/capabilities folder should not contain any code and should be easy to read for both non-technical and technical readers.
    - The /fern/docs/pages/workflows folder is tailored to non-technical readers (specifically enterprise customers) who need detailed step-by-step visual guides.
    - The /fern/docs/pages/developer-guides is strictly for technical readers. This contains detailed guides on how to use the SDK or API.
    - The best-practices folder contains both tech & non-technical content.
  - The `conversational-ai` tab (/fern/conversational-ai) contains content for the conversational-ai product. It is tailored to technical people but may be read by non-technical people.
  - The `api-reference` tab (/fern/api-reference) contains content for the API. It is tailored to technical people only.
- If the user asks you to update the changelog, you must create a new changelog file in the /fern/docs/pages/changelog folder with the following file name: `2024-10-13.md` (the date should be the current date).

  - The structure of the changelog should look something like this:

- Ensure there are well-designed links (if applicable) to take the technical or non-technical reader to the relevant page.

# Page structure

- Every `.mdx` file starts with:

---

title: <insert title here, keep it short>
subtitle: <insert subtitle here, keep it concise and short>

- Example titles (good, short, first word capitalized):
  - Getting started
  - Text to speech
  - Streaming
  - API reference
  - Conversational AI
- Example subtitles (concise, some starting with "Learn how to …" for guides):
  - Build your first conversational AI voice agent in 5 minutes.
  - Learn how to control delivery, pronunciation & emotion of text to speech.
- All documentation images are located in the non-nested /fern/assets/images folder. The path can be referenced in `.mdx` files as /assets/images/<file-name>.jpg/png/svg.

## Components

Use the following components whenever possible to enhance readability and structu

... [Content truncated due to length]

2. /learn/docs/writing-content/components/code-blocks (Code Blocks)

• URL: https://fern-api.docs.buildwithfern.com/learn/docs/writing-content/components/code-blocks
• Validation Issues:
  • Mismatched CodeBlock tags: 4 opening, 0 closing
  • Mismatched Tab tags: 33 opening, 22 closing

Suggested Content (needs manual MDX fixes):

---
title: 'Code Blocks'
description: 'Learn how to enhance your documentation with customizable code blocks featuring syntax highlighting, line highlighting, focusing, and more.'
---

Fern uses [Shiki](https://shiki.matsu.io/) for syntax highlighting in code blocks. 
It's reliable and performant. Below are examples of how you can configure syntax highlighting in code snippets.

## Basic

To create a code snippet, you need to wrap your code in three backticks. 
You can also specify the language for syntax highlighting after the opening backticks.

<Tabs>
  <Tab title="Example">
    ```js
    console.log("hello world")
    ```
  </Tab>
  <Tab title="Markdown">
    ````mdx
    ```js
    console.log("hello world")
    ```
    ````
  </Tab>
</Tabs>


## Titles

You can add a title to your code snippet by adding a title after the language identifier.

<Tabs>
  <Tab title="Example">
    ```js Hello World Snippet
    console.log("hello world")
    ```
  </Tab>
  <Tab title="Markdown">
    ````mdx
    ```js Hello World Snippet
    console.log("hello world")
    ```
    ````

    <Note>
      You may also use a `title` prop or `filename` prop to achieve the same result. 
      
      For example, `title="Hello World Snippet"` or `filename="Hello World Snippet"`.
    </Note>
  </Tab>
</Tabs>

## Line highlighting

You can highlight specific lines in your code snippet by placing a numeric range inside `{}` 
after the language identifier.

<Tabs>
  <Tab title="Example">
    ```js {2-4}
    console.log("Line 1");
    console.log("Line 2");
    console.log("Line 3");
    console.log("Line 4");
    console.log("Line 5");
    ```
  </Tab>
  <Tab title = "Markdown">
    ````markdown
    ```javascript {2-4}
    console.log("Line 1");
    console.log("Line 2");
    console.log("Line 3");
    console.log("Line 4");
    console.log("Line 5");
    ```
    ````

    <Note>
      The range is inclusive and can be a single number, a comma-separated list of numbers, or ranges.

      For example, `{1,3,5-7}` will highlight lines 1, 3, 5, 6, and 7.
    </Note>
  </Tab>
</Tabs>

## Line focusing

Instead of highlighting lines, you can focus on specific lines by adding a comment `[!code focus]` or by adding a 
`focus` attribute after the language identifier. The `focus` attribute works the same way as the `highlight` attribute.

<Tabs>
  <Tab title="Example">
    ```javascript focus={2-4}
    console.log("Line 1");
    console.log("Line 2");
    console.log("Line 3");
    console.log("Line 4");
    console.log("Line 5");
    ```
  </Tab>
  <Tab title = "Markdown">
    ````markdown
    ```javascript focus={2-4}
    console.log("Line 1");
    console.log("Line 2");
    console.log("Line 3");
    console.log("Line 4");
    console.log("Line 5");
    ```
    ````
  </Tab>
</Tabs>

## Max height

You can control the max height of the code block by adding 
a `maxLines` attribute after the language identifier. The 
`maxLines` attribute should be a number representing the maximum 
number of lines to display. By default, the code block will display up to 20 lines.

When using the `maxLines` property, code blocks automatically become expandable on desktop devices, allowing users to view the full content. This feature can be disabled by hiding the selector using CSS.

<Tabs>
  <Tab title="Example">
    ```python maxLines=10
    def is_prime(num):
        """Check if a number is prime."""
        if num <= 1:
            return False
        for i in range(2, num):
            if num % i == 0:
                return False
        return True

    start = 10
    end = 50

    print(f"Prime numbers between {start} and {end} are:")

    prime_numbers = []

    for num in range(start, end+1):
        if is_prime(num):
            prime_numbers.append(num)

    for prime in prime_numbers:
        print(prime)
    ```
  </Tab>
  <Tab title = "Markdown">
    ````markdown maxLines=10
    ```python maxLines=10
    def is_prime(num):
        """Check if a number is prime."""
 

... [Content truncated due to length]

Note: These files require manual review and correction of their MDX component structure before the content can be applied.

---

This PR was automatically generated by Fern Scribe based on issue #470

Please review the changes carefully before merging.