diff --git a/fern/pages/docs/components/code-blocks.mdx b/fern/pages/docs/components/code-blocks.mdx index 65f381cf48d..75fdf13bbcc 100644 --- a/fern/pages/docs/components/code-blocks.mdx +++ b/fern/pages/docs/components/code-blocks.mdx @@ -189,13 +189,13 @@ By default, long lines that exceed the width of the code block become scrollable ```txt title="Without Word Wrap" -A very very very long line of text that may cause the codeblock to overflow and scroll as a result. +A very very very long line of text that may cause the code block to overflow and scroll as a result. ``` ````markdown ```txt title="Without Word Wrap" -A very very very long line of text that may cause the codeblock to overflow and scroll as a result. +A very very very long line of text that may cause the code block to overflow and scroll as a result. ``` ```` @@ -206,7 +206,7 @@ To disable scrolling and wrap overflow onto the next line, use the `wordWrap` pr ```txt title="With Word Wrap" wordWrap -A very very very long line of text that may cause the codeblock to overflow and scroll as a result. +A very very very long line of text that may cause the code block to overflow and scroll as a result. ``` @@ -259,71 +259,105 @@ and a maximum height. -## Tabbed CodeBlocks +## Code Blocks with Tabs -The `CodeBlocks` component is used to display multiple code snippets in a tabbed view. It does not take any props. When a `CodeBlock` with a specific language is selected, all other `CodeBlocks` will sync to show that language, if present. +The `CodeBlocks` component allows you to display multiple code blocks in a tabbed interface. - ```javascript title="helloWorld.js" - console.log("Hello World"); + ```ruby title="hello_world.rb" + puts "Hello World" ``` - ```python title="hello_world.py" - print('Hello World!') + ```php title="hello_world.php" + ``` - ```java title="HelloWorld.java" - class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } + ```rust title="hello_world.rs" + fn main() { + println!("Hello World"); } ``` - + ````jsx maxLines=0 - ```javascript title="helloWorld.js" - console.log("Hello World"); + ```ruby title="hello_world.rb" + puts "Hello World" ``` - ```python title="hello_world.py" - print('Hello World!') + ```php title="hello_world.php" + ``` - ```java title="HelloWorld.java" - class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello, World!"); - } - } + ```rust title="hello_world.rs" + fn main() { + println!("Hello World"); + } ``` ```` -**Syncing CodeBlocks** +### Example of Synchronized Blocks + +Multiple `CodeBlocks` on a page automatically synchronize, showing the same language across all blocks. + + +```python title="Python" +print("First code block!") +``` + +```typescript title="TypeScript" +console.log("First code block!"); +``` + +```go title="Go" +fmt.Println("First code block!") +``` + +```csharp title="C#" +Console.WriteLine("First code block!"); +``` + +```java title="Java" +System.out.println("First code block!"); +``` + +```ruby title="Ruby" +puts "First code block!" +``` + + -```javascript title="helper.js" -function helper() { - console.log("Helping out!"); -} +```python title="Python" +print("Second code block - syncs with the one above!") +``` + +```typescript title="TypeScript" +console.log("Second code block - syncs with the one above!"); +``` + +```go title="Go" +fmt.Println("Second code block - syncs with the one above!") +``` + +```csharp title="C#" +Console.WriteLine("Second code block - syncs with the one above!"); ``` -```python title="helper.py" -def helper(): - print("Helping out!") +```java title="Java" +System.out.println("Second code block - syncs with the one above!"); ``` -```java title="Helper.java" -class Helper { - public static void main(String[] args) { - System.out.println("Helping out!"); - } -} +```ruby title="Ruby" +puts "Second code block - syncs with the one above!" ```