Format code

Adding code samples

You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.

Inline code

To denote a word or phrase as code, enclose it in backticks (`).

mdx

To denote a `word` or `phrase` as code, enclose it in backticks (`).

Code blocks

Use fenced code blocks by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask AI to explain the code.

Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.

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

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

Code block options

Add meta options to your code blocks to customize their appearance.

You must specify a programming language for a code block before adding any other meta options.

Option syntax

String and boolean options: Wrap with "", '', or no quotes.
Expression options: Wrap with {}, "", or ''.

Syntax highlighting

Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.

We use Shiki for syntax highlighting and support all available languages. See the full list of languages in Shiki's documentation.

Customize code block themes globally using styling.codeblocks in your config.json file. Set simple themes like system or dark, or configure custom Shiki themes for light and dark modes. See Settings for configuration options.

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

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

Twoslash

In JavaScript and TypeScript code blocks, use twoslash to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE.

type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Luna", "cat");

```ts twoslash Twoslash example
type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Luna", "cat");
```

Title

Add a title to label your code example. Use title="Your title" or a string on a single line.

const hello = "world";

```javascript Title example
const hello = "world";
```

Icon

Add an icon to your code block using the icon property. See Icons for all available options.

const hello = "world";
console.log(hello);

<CodeBlock language="javascript" filename="app.js" icon="file-code">
{`const hello = "world";`}
</CodeBlock>

Line highlighting

Highlight specific lines using the <CodeBlock> component with the highlight prop. Specify line numbers and ranges like "{1,3-5}".

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

<CodeBlock language="javascript" filename="highlight.js" highlight="{1,2,5}">
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Line focusing

Focus on specific lines using the <CodeBlock> component with the focus prop. Non-focused lines will be dimmed.

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

<CodeBlock language="javascript" filename="focus.js" focus="{2,3}">
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Show line numbers

Display line numbers on the left side of your code block using the <CodeBlock> component with the lines prop.

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

<CodeBlock language="javascript" filename="example.js" lines>
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Expandable

Allow users to expand and collapse long code blocks using the <CodeBlock> component with the expandable prop.

from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

@dataclass
class Book:
title: str
author: str
isbn: str
checked_out: bool = False
due_date: Optional[datetime] = None

class Library:
def __init__(self):
  self.books: Dict[str, Book] = {}
  self.checkouts: Dict[str, List[str]] = {}

def add_book(self, book: Book) -> None:
  if book.isbn in self.books:
    raise ValueError(f"Book with ISBN {book.isbn} already exists")
  self.books[book.isbn] = book

def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
  if patron not in self.checkouts:
    self.checkouts[patron] = []

  book = self.books.get(isbn)
  if not book:
    raise ValueError("Book not found")

  if book.checked_out:
    raise ValueError("Book is already checked out")

  book.checked_out = True
  book.due_date = datetime.now() + timedelta(days=days)
  self.checkouts[patron].append(isbn)

def return_book(self, isbn: str) -> float:
  book = self.books.get(isbn)
  if not book or not book.checked_out:
    raise ValueError("Book not found or not checked out")

  late_fee = 0.0
  if datetime.now() > book.due_date:
    days_late = (datetime.now() - book.due_date).days
    late_fee = days_late * 0.50

  book.checked_out = False
  book.due_date = None
  return late_fee

def main():
library = Library()
library.add_book(Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"))
library.checkout_book("978-0-261-10295-4", "patron123")
print(f"Late fee: {library.return_book('978-0-261-10295-4'):.2f}")

if __name__ == "__main__":
main()

<CodeBlock language="python" filename="library.py" expandable>
{`from datetime import datetime, timedelta
...
if __name__ == "__main__":
  main()`}
</CodeBlock>

Wrap

Enable text wrapping for long lines using the <CodeBlock> component with the wrap prop. This prevents horizontal scrolling and makes long lines easier to read.

const greeting = "Hello, World! I am a very long line of text that will wrap to the next line instead of requiring horizontal scrolling.";
function sayHello() {
console.log(greeting);
}
sayHello();

<CodeBlock language="javascript" filename="wrap.js" wrap>
{`const greeting = "Hello, World! I am a very long line...";`}
</CodeBlock>

Diff

Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red.

Use the <CodeBlock> component with the diff prop to auto-detect lines starting with + or -:

const config = {
-  debug: true,
-  logLevel: "verbose",
+  debug: false,
+  logLevel: "error",
timeout: 5000,
};

<CodeBlock language="javascript" filename="config.js" diff>
{`const config = {
-  debug: true,
+  debug: false,
  timeout: 5000,
};`}
</CodeBlock>

Or use the add and remove props with line numbers for explicit control:

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

<CodeBlock language="javascript" add="{1,4}" remove="{3}">
{`...`}
</CodeBlock>

CodeBlock component

Use the <CodeBlock> component in custom React components to programmatically render code blocks with the same styling and features as markdown code blocks.

Props

language

string

The programming language for syntax highlighting.

filename

string

The filename to display in the code block header.

icon

string

The icon to display in the code block header. See Icons for available options.

lines

boolean

Whether to show line numbers.

wrap

boolean

Whether to wrap the code block.

expandable

boolean

Whether to expand the code block.

highlight

string

The lines to highlight. Supports individual lines and ranges. Example: "{1,3-5}".

focus

string

The lines to focus on. Supports individual lines and ranges. Example: "{2,4-6}".

add

string

The lines to mark as added (green). Supports individual lines and ranges. Example: "{1,3-5}".

remove

string

The lines to mark as removed (red). Supports individual lines and ranges. Example: "{2,4}".

diff

boolean

Enable auto-detection of +/- prefixes for diff highlighting.

Example

jsx

export const CustomCodeBlock = ({ filename, icon, language, highlight, children }) => {
  return (
    <CodeBlock
      filename={filename}
      icon={icon}
      language={language}
      lines
      highlight={highlight}
    >
      {children}
    </CodeBlock>
  );
};

Adding code samples

You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.

Inline code

To denote a word or phrase as code, enclose it in backticks (`).

mdx

To denote a `word` or `phrase` as code, enclose it in backticks (`).

Code blocks

Use fenced code blocks by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask AI to explain the code.

Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.

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

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

Code block options

Add meta options to your code blocks to customize their appearance.

You must specify a programming language for a code block before adding any other meta options.

Option syntax

String and boolean options: Wrap with "", '', or no quotes.
Expression options: Wrap with {}, "", or ''.

Syntax highlighting

Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.

We use Shiki for syntax highlighting and support all available languages. See the full list of languages in Shiki's documentation.

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

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

Twoslash

In JavaScript and TypeScript code blocks, use twoslash to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE.

type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Luna", "cat");

```ts twoslash Twoslash example
type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Luna", "cat");
```

Title

Add a title to label your code example. Use title="Your title" or a string on a single line.

const hello = "world";

```javascript Title example
const hello = "world";
```

Icon

Add an icon to your code block using the icon property. See Icons for all available options.

const hello = "world";
console.log(hello);

<CodeBlock language="javascript" filename="app.js" icon="file-code">
{`const hello = "world";`}
</CodeBlock>

Line highlighting

Highlight specific lines using the <CodeBlock> component with the highlight prop. Specify line numbers and ranges like "{1,3-5}".

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

<CodeBlock language="javascript" filename="highlight.js" highlight="{1,2,5}">
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Line focusing

Focus on specific lines using the <CodeBlock> component with the focus prop. Non-focused lines will be dimmed.

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

<CodeBlock language="javascript" filename="focus.js" focus="{2,3}">
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Show line numbers

Display line numbers on the left side of your code block using the <CodeBlock> component with the lines prop.

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

<CodeBlock language="javascript" filename="example.js" lines>
{`const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();`}
</CodeBlock>

Expandable

Allow users to expand and collapse long code blocks using the <CodeBlock> component with the expandable prop.

from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

@dataclass
class Book:
title: str
author: str
isbn: str
checked_out: bool = False
due_date: Optional[datetime] = None

class Library:
def __init__(self):
  self.books: Dict[str, Book] = {}
  self.checkouts: Dict[str, List[str]] = {}

def add_book(self, book: Book) -> None:
  if book.isbn in self.books:
    raise ValueError(f"Book with ISBN {book.isbn} already exists")
  self.books[book.isbn] = book

def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
  if patron not in self.checkouts:
    self.checkouts[patron] = []

  book = self.books.get(isbn)
  if not book:
    raise ValueError("Book not found")

  if book.checked_out:
    raise ValueError("Book is already checked out")

  book.checked_out = True
  book.due_date = datetime.now() + timedelta(days=days)
  self.checkouts[patron].append(isbn)

def return_book(self, isbn: str) -> float:
  book = self.books.get(isbn)
  if not book or not book.checked_out:
    raise ValueError("Book not found or not checked out")

  late_fee = 0.0
  if datetime.now() > book.due_date:
    days_late = (datetime.now() - book.due_date).days
    late_fee = days_late * 0.50

  book.checked_out = False
  book.due_date = None
  return late_fee

def main():
library = Library()
library.add_book(Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"))
library.checkout_book("978-0-261-10295-4", "patron123")
print(f"Late fee: {library.return_book('978-0-261-10295-4'):.2f}")

if __name__ == "__main__":
main()

<CodeBlock language="python" filename="library.py" expandable>
{`from datetime import datetime, timedelta
...
if __name__ == "__main__":
  main()`}
</CodeBlock>

Wrap

Enable text wrapping for long lines using the <CodeBlock> component with the wrap prop. This prevents horizontal scrolling and makes long lines easier to read.

const greeting = "Hello, World! I am a very long line of text that will wrap to the next line instead of requiring horizontal scrolling.";
function sayHello() {
console.log(greeting);
}
sayHello();

<CodeBlock language="javascript" filename="wrap.js" wrap>
{`const greeting = "Hello, World! I am a very long line...";`}
</CodeBlock>

Diff

Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red.

Use the <CodeBlock> component with the diff prop to auto-detect lines starting with + or -:

const config = {
-  debug: true,
-  logLevel: "verbose",
+  debug: false,
+  logLevel: "error",
timeout: 5000,
};

<CodeBlock language="javascript" filename="config.js" diff>
{`const config = {
-  debug: true,
+  debug: false,
  timeout: 5000,
};`}
</CodeBlock>

Or use the add and remove props with line numbers for explicit control:

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

<CodeBlock language="javascript" add="{1,4}" remove="{3}">
{`...`}
</CodeBlock>

CodeBlock component

Use the <CodeBlock> component in custom React components to programmatically render code blocks with the same styling and features as markdown code blocks.

Props

language

string

The programming language for syntax highlighting.

filename

string

The filename to display in the code block header.

icon

string

The icon to display in the code block header. See Icons for available options.

lines

boolean

Whether to show line numbers.

wrap

boolean

Whether to wrap the code block.

expandable

boolean

Whether to expand the code block.

highlight

string

The lines to highlight. Supports individual lines and ranges. Example: "{1,3-5}".

focus

string

The lines to focus on. Supports individual lines and ranges. Example: "{2,4-6}".

add

string

The lines to mark as added (green). Supports individual lines and ranges. Example: "{1,3-5}".

remove

string

The lines to mark as removed (red). Supports individual lines and ranges. Example: "{2,4}".

diff

boolean

Enable auto-detection of +/- prefixes for diff highlighting.

Example

jsx

export const CustomCodeBlock = ({ filename, icon, language, highlight, children }) => {
  return (
    <CodeBlock
      filename={filename}
      icon={icon}
      language={language}
      lines
      highlight={highlight}
    >
      {children}
    </CodeBlock>
  );
};