Code Blocks

Render code blocks inline or as a code snippet with syntax highlighting by enclosing them in backticks (`).

Inline Code#

Code can be rendereed inline by enclosing it in single backticks (`).

For example: print("Hello World").

This can be created by adding the following to your markdown:

For example: `print("Hello World")`.

Code Snippets#

A fully syntax highlighted code block can be generated by using fenced code blocks, which are blocks of code surrounded by three backticks on the lines above and below the code block.

All code blocks provide a copy button in the top right corner of the code block when hovering, for example:

echo "Hello World"

Following the backticks, you can optionally specify a language identifier to enable syntax highlighting:

export async function apiRequest(options) {
  const response = await fetch(options.url);
  const data = await response.json();
  return data;
}

The above code block was created with the following snippet:

```javascript
export async function apiRequest(options) {
  // ...

Syntax highlighting is generated using Shiki. You can find a list of supported languages here.

Adding a Title#

You can add a title to code blocks by adding an attribute to the opening backticks:

Sending a request

export async function apiRequest(options) {
  const response = await fetch(options.url);
  const data = await response.json();
  return data;
}

The above code block was created with the following snippet:

```javascript title="Sending a request"
export async function apiRequest(options) {
  // ...

Code Groups#

You can group multiple code blocks together by using the <CodeGroup> component. This is useful for showing variations of the "same" code in a different language

Logging: Hello World

console.log("Hello World");

print('Hello World!')

void main() {
  print('Hello World!');
}

Specify each of the code blocks and their language as children of the component.

<CodeGroup title="Logging: Hello World">
  ```javascript
  console.log("Hello World");
  ```

  ```python
  print('Hello World!')
  ```

  ```dart
  void main() {
    print('Hello World!');
  }
  ```
</CodeGroup>

You can also specify the default language using the defaultLanguage property:

<CodeGroup defaultLanguage="dart" title="Logging: Hello World">