Skip to content

Commit 16b75b5

Browse files
devalogdevalog
committed
clarify language sync for tabs and code blocks
1 parent ee9914c commit 16b75b5

File tree

2 files changed

+82
-25
lines changed

2 files changed

+82
-25
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,9 +306,16 @@ The `CodeBlocks` component allows you to display multiple code blocks in a tabbe
306306
</Tab>
307307
</Tabs>
308308

309-
## Example of Synchronized Blocks
309+
## Language synchronization
310310

311-
Multiple `CodeBlocks` on a page automatically synchronize, showing the same language across all blocks.
311+
Multiple `CodeBlocks` on a documentation site automatically synchronize. This
312+
means when a user selects a `CodeBlock` with a specific language, all other
313+
`CodeBlocks` across your documentation site with the same language will
314+
automatically sync and switch to match. Language preferences are stored in
315+
client-side local storage and persist across browser sessions.
316+
317+
The example below demonstrates language sync in action – choosing a language in
318+
either set of code blocks will automatically update both sets to match:
312319

313320
<CodeBlocks>
314321
```python title="Python"
@@ -362,6 +369,10 @@ Multiple `CodeBlocks` on a page automatically synchronize, showing the same lang
362369
```
363370
</CodeBlocks>
364371

372+
<Note title="Tabs and CodeBlocks integration">
373+
`CodeBlocks` automatically synchronize with [`<Tab>` components that have a `language` property](/docs/writing-content/components/tabs#language-synchronization).
374+
</Note>
375+
365376
### Override synchronization
366377

367378
You can override the synchronization of code blocks by setting the `for` prop.

‎fern/products/docs/pages/component-library/default-components/tabs.mdx‎

Lines changed: 69 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
11
---
2-
title: 'Tabs'
3-
description: 'The Tabs component allows you to display related content in a tabbed view.'
2+
title: Tabs
3+
description: The Tabs component allows you to display related content in a tabbed view with support for language synchronization.
44
---
55

6-
The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples or code snippets.
7-
8-
## Properties
9-
<ParamField path="title" type="string" required={true}>
10-
The title displayed in the tab header
11-
</ParamField>
12-
13-
<ParamField path="language" type="string" required={false}>
14-
The language associated with the code block. Any arbitrary string may be used.
15-
16-
When a user selects a tab with a specific language, all other tabs assigned to the same language will automatically sync and switch to match.
17-
</ParamField>
18-
19-
<ParamField path="children" type="string | JSX" required={true}>
20-
The content to be displayed when the tab is selected. Can include text, markdown, and components.
21-
</ParamField>
22-
23-
<br />
6+
The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.
247

258
<Tabs>
269
<Tab title="First Tab">
@@ -34,8 +17,6 @@ The Tabs component organizes content into separate tabs that users can switch be
3417
</Tab>
3518
</Tabs>
3619

37-
<Aside>
38-
3920
<CodeBlock title="Markdown">
4021
```jsx
4122
<Tabs>
@@ -52,4 +33,69 @@ The Tabs component organizes content into separate tabs that users can switch be
5233
```
5334
</CodeBlock>
5435

55-
</Aside>
36+
## Properties
37+
38+
<ParamField path="title" type="string" required={true}>
39+
The title displayed in the tab header
40+
</ParamField>
41+
42+
<ParamField path="language" type="string" required={false}>
43+
The language associated with the code block. Any arbitrary string may be used.
44+
45+
When specified, enables global language synchronization across all tabs and code blocks with the same language value.
46+
</ParamField>
47+
48+
<ParamField path="children" type="string | JSX" required={true}>
49+
The content to be displayed when the tab is selected. Can include text, markdown, and components.
50+
</ParamField>
51+
52+
## Language synchronization
53+
54+
Multiple `Tabs` with a `language` property automatically synchronize. This means
55+
when a user selects a tab with a specific language, all other tabs across your
56+
documentation site with the same language will automatically sync and switch to
57+
match. Language preferences are stored in client-side local storage and persist
58+
across browser sessions.
59+
60+
The example below demonstrates language sync in action – choosing a language in
61+
either set of tabs will automatically update both sets to match:
62+
63+
<Tabs>
64+
<Tab title="TypeScript" language="typescript">
65+
```typescript
66+
console.log("First code block!");
67+
```
68+
</Tab>
69+
<Tab title="Python" language="python">
70+
```python
71+
print("First code block!")
72+
```
73+
</Tab>
74+
<Tab title="Java" language="java">
75+
```java
76+
System.out.println("First code block!");
77+
```
78+
</Tab>
79+
</Tabs>
80+
81+
<Tabs>
82+
<Tab title="TypeScript" language="typescript">
83+
```typescript
84+
console.log("Second code block – language syncs with the one above!");
85+
```
86+
</Tab>
87+
<Tab title="Python" language="python">
88+
```python
89+
print("Second code block – language syncs with the one above!")
90+
```
91+
</Tab>
92+
<Tab title="Java" language="java">
93+
```java
94+
System.out.println("Second code block – language syncs with the one above!");
95+
```
96+
</Tab>
97+
</Tabs>
98+
99+
<Note title="Tabs and CodeBlocks integration">
100+
Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
101+
</Note>

0 commit comments

Comments
 (0)