diff --git a/changelog-entries/2025-08-15-issue-470.md b/changelog-entries/2025-08-15-issue-470.md new file mode 100644 index 00000000..f68e3727 --- /dev/null +++ b/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* diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index ddb3dbc7..f5141299 100644 --- a/fern/products/docs/docs.yml +++ b/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 - \ No newline at end of file diff --git a/fern/products/docs/pages/changelog/2024/3/24.mdx b/fern/products/docs/pages/changelog/2024/3/24.mdx new file mode 100644 index 00000000..2eb5eed7 --- /dev/null +++ b/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 +``` \ No newline at end of file diff --git a/fern/products/docs/pages/writing-content/code-blocks.mdx b/fern/products/docs/pages/writing-content/code-blocks.mdx new file mode 100644 index 00000000..a1ae7fac --- /dev/null +++ b/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 +} +``` + + +The expand/collapse functionality is currently only available on desktop devices. You can disable this feature by hiding the selector using CSS. + + +### 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. \ No newline at end of file