Code Blocks

Fern uses Shiki to do syntax highlighting. It’s very 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 codeblock 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 codeblock 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");

Tabbed CodeBlocks

The CodeBlocks component is used to display multiple code snippets in a tabbed view. It does not take any props.

1
console.log("Hello World");