Code Blocks

Fern uses Shiki 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.

1
console.log("hello world")

Titles

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

1
console.log("hello world")

Line highlighting

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

1
console.log("Line 1");
2
console.log("Line 2");
3
console.log("Line 3");
4
console.log("Line 4");
5
console.log("Line 5");

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.

1
console.log("Line 1");
2
console.log("Line 2");
3
console.log("Line 3");
4
console.log("Line 4");
5
console.log("Line 5");

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.

1
def is_prime(num):
2
    """Check if a number is prime."""
3
    if num <= 1:
4
        return False
5
    for i in range(2, num):
6
        if num % i == 0:
7
            return False
8
    return True
9
10
start = 10
11
end = 50
12
13
print(f"Prime numbers between {start} and {end} are:")
14
15
prime_numbers = []
16
17
for num in range(start, end+1):
18
    if is_prime(num):
19
        prime_numbers.append(num)
20
21
for prime in prime_numbers:
22
    print(prime)

Wrap overflow

By default, long lines that exceed the width of the code block become scrollable:

A very very very long line of text that may cause the code block to overflow and scroll as a result. 

To disable scrolling and wrap overflow onto the next line, use the wordWrap prop:

A very very very long line of text that may cause the code block to overflow and scroll as a result. 

Combining props

You can combine the title, highlight, focus, maxLines, and wordWrap props to create a code block with a title, highlighted lines, and a maximum height.

1
console.log("Line 1");
2
console.log("Line 2");
3
console.log("Line 3");
4
console.log("Line 4");
5
console.log("Line 5");
6
console.log("Line 6");
7
console.log("Line 7");
8
console.log("Line 8");
9
console.log("Line 9");
10
console.log("Line 10");

Code Blocks with Tabs

The CodeBlocks component allows you to display multiple code blocks in a tabbed interface.

1
puts "Hello World"

Example of Synchronized Blocks

Multiple CodeBlocks on a page automatically synchronize, showing the same language across all blocks.

1
print("First code block!")

1
print("Second code block - syncs with the one above!")

Override synchronization

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

$
npm install plantstore

$
npm uninstall plantstore

Embed local code files

1
console.log("I love Fern!");

1
console.log("I love Fern!");