Code Groups

Show the same concept in different languages or package managers.

Basic Usage

npm install docyard

yarn add docyard

pnpm add docyard

Language Icons

Icons are automatically detected from the code block language:

const name = "Docyard";
console.log(`Hello, ${name}!`);

name = "Docyard"
print(f"Hello, {name}!")

name = "Docyard"
puts "Hello, #{name}!"

With Filenames

Use descriptive filenames as labels:

title: My Docs
description: Documentation for my project
branding:
  color: "#3b82f6"

- getting-started:
    text: Get Started
    icon: rocket-launch
    items:
      - quickstart

With Code Block Features

Combine with line numbers, highlighting, and markers:

export default {
  title: "My Docs",
  description: "Documentation site"
}

config = {
    "title": "My Docs",
    "description": "Documentation site"
}

const greeting = "Hello, " + name; 
const greeting = `Hello, ${name}!`; 

greeting = "Hello, " + name  
greeting = f"Hello, {name}!"  

Synced Groups

Code groups with identical labels stay in sync across the page:

npm install

yarn install

pnpm install

npm run build

yarn build

pnpm build

Click a tab in one group and all matching tabs switch together.

Code Groups vs Tabs

Use Code Groups when showing:

• Same code in different languages
• Same command for different package managers
• Alternative implementations

Use Tabs when showing:

• Different types of content (text, config, examples)
• Platform-specific instructions with prose
• Content that isn’t just code

Syntax

:::code-group
```language [Label]
code here
```

```language [Label]:line-numbers {1,3}
code with features
```
:::

Reference

See Code Blocks for line numbers, highlighting, and marker syntax.