Code Blocks

Display code with optional syntax highlighting

Basic Usage

Use three backticks (```) to create code blocks in markdown. Add a language identifier after the backticks for syntax highlighting, powered by Prism.

Example with Syntax Highlighting

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Additional Features

Names

Add text after the language identifier to name your code example:

Named Example

const hello = "world";

Line Highlighting

Highlight specific lines using curly braces {} with line numbers or ranges:

Line Highlighting

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
  sayHello();
}

Code Groups

For multiple code examples in one block, see our Code Group component:

Code Group

Read the reference for the Code Group component