Configure syntax highlighting and more in your code snippets

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.

1console.log("hello world")

Titles

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

Hello World Snippet
1console.log("hello world")

Line highlighting

You can highlight specific lines in your code snippet by adding a comment [!code highlight] or by placing a numeric range inside {} after the language identifier.

1console.log("Line 1");
2console.log("Line 2");
3console.log("Line 3");
4console.log("Line 4");
5console.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.

1console.log("Line 1");
2console.log("Line 2");
3console.log("Line 3");
4console.log("Line 4");
5console.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.

1def 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
10start = 10
11end = 50
12
13print(f"Prime numbers between {start} and {end} are:")
14
15prime_numbers = []
16
17for num in range(start, end+1):
18 if is_prime(num):
19 prime_numbers.append(num)
20
21for prime in prime_numbers:
22 print(prime)

Combining props

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

Hello, World!
1console.log("Line 1");
2console.log("Line 2");
3console.log("Line 3");
4console.log("Line 4");
5console.log("Line 5");
6console.log("Line 6");
7console.log("Line 7");
8console.log("Line 8");
9console.log("Line 9");
10console.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.

1console.log("Hello World");