Code Blocks

AI Tools

Code blocks let you present pretty, syntax-highlighted code. There are two related blocks:

Code block: a single snippet in one language.
Code tabs: several snippets shown as tabs, for instance the same code in different languages.

To add either one:

Type / on a new line or click on the on the left of any line.
Select Code block or Code tabs

Supported Languages

The following languages are currently supported for syntax highlighting:

Bash, C , C-Like, C++, C#, CSS, CSV, D, Dart, Django, Docker, Go, Groovy, HTML, HTTP, Javascript, Java, JSON, JSX, Kotlin, Lua, Markdown, Markup, Objective-C, Pascal, Perl, PHP, Powershell, Python, R, Rust, Ruby, Sass, Scss, Scala, SQL, Squirrel, Swift, Typescript, VB.NET, Visual Basic, XML.

If you need more languages, we'd be happy to support them. Give us a nudge!

Info

Syntax error highlighting only shows while editing

Code Tabs Example

A Code tabs block showing the fibonacci sequence in different languages:

function fibonacci(num, memo) {

memo = memo || {};

if (memo[num]) return memo[num];

if (num <= 1) return 1;

return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);

}

# Program to display the Fibonacci sequence up to n-th term

nterms = int(input("How many terms? "))

# first two terms

n1, n2 = 0, 1

count = 0

# check if the number of terms is valid

if nterms <= 0:

print("Please enter a positive integer")

elif nterms == 1:

print("Fibonacci sequence upto",nterms,":")

print(n1)

else:

print("Fibonacci sequence:")

while count < nterms:

print(n1)

nth = n1 + n2

# update values

n1 = n2

n2 = nth

count += 1

func FibonacciRecursion(n int) int {

if n <= 1 {

return n

}

return FibonacciRecursion(n-1) + FibonacciRecursion(n-2)

}

#include <stdio.h>

int main() {

int i, n, t1 = 0, t2 = 1, nextTerm;

printf("Enter the number of terms: ");

scanf("%d", &n);

printf("Fibonacci Series: ");

for (i = 1; i <= n; ++i) {

printf("%d, ", t1);

nextTerm = t1 + t2;

t1 = t2;

t2 = nextTerm;

}

return 0;

}

def fib(n)

first_num, second_num = [0, 1]

(n - 1).times do

first_num, second_num = second_num, first_num + second_num

end

puts first_num

end

No Formatting Code Block

Code blocks can have no formatting if language "None" is selected. Also, if only language "None" was provided for the code block, then the language selector will disappear unless if the tab has a title. For example:

This is a code block with no formatting

- Correct?

And another one with title:

A titled code block without formatting keeps its title

Titled Tabs

You can also provide titles for each tab, which is a great way to identify and group the content. For example:

[

{

"id": 4,

"published": true,

"name": "v1.0",

"created": "2019-03-20T19:02:14+0000",

"updated": "2019-03-20T19:02:14+0000",

"slug": "developerhub.io-api",

"ordr": 4

}

]

{

"error": {

"message": "Access denied.",

"httpCode": 403,

"code": 403

}

Collapsing Contents

When a code block has more than 100 lines, it is shown with its foldable regions collapsed, so a long snippet does not dominate the page. Folding is language-aware: each function or indented block folds at its own boundary, and languages without their own grammar fall back to indentation-based folding. Example:

paths:…:

get:…

To fold or unfold a region yourself, click the fold arrows in the gutter to the left of the code.

Show Line Numbers

There are two ways to show line numbers:

For each tab, you could enable showing line numbers from the tab options.
Globally, you could enable showing line numbers for all code blocks in the project. See option code.showLineNumbers in advanced settings.

Highlight Code

Lines of code can be highlighted. From the tab option menu, you can write down the line numbers to be highlighted. The syntax for highlighting is as such:

Use dashes - to make an inclusive range.
Use commas to separate rules.

For example:

5-7: Highlights lines 5 to 7.
1,2,3: Highlights lines 1, 2 and 3.
1,10-20,25: Highlights lines number 1, 10 to 20 and 25.

See the following code blocks for examples:

/** Returns a stripped Markdown

* @param $html

* @return string

public static function toMarkdown($html)

{

$converter = new HtmlConverter();

$converter->getConfig()->setOption('strip_tags', true);

$converter->getConfig()->setOption('italic_style', '_');

$converter->getConfig()->setOption('bold_style', '**');

$converter->getConfig()->setOption('hard_break', true);

return $converter->convert($html);

}

/** Returns a stripped Markdown

* @param $html

* @return string

public static function toMarkdown($html)

{

$converter = new HtmlConverter();

$converter->getConfig()->setOption('strip_tags', true);

$converter->getConfig()->setOption('italic_style', '_');

$converter->getConfig()->setOption('bold_style', '**');

$converter->getConfig()->setOption('hard_break', true);

return $converter->convert($html);

}

/** Returns a stripped Markdown

* @param $html

* @return string

public static function toMarkdown($html)

{

$converter = new HtmlConverter();

$converter->getConfig()->setOption('strip_tags', true);

$converter->getConfig()->setOption('italic_style', '_');

$converter->getConfig()->setOption('bold_style', '**');

$converter->getConfig()->setOption('hard_break', true);

return $converter->convert($html);

}

Line Wrapping

By default, code block lines wrap unless a line exceeds 120 characters or the view is in mobile mode. However, you have the option to enable or disable line wrapping as needed.

blocks

Last updated on Jul 13, 2026

Was this page helpful?