Components

Code Group

Display multiple code blocks in a tabbed interface

Code groups display multiple code examples in tabs. Put one fenced code block inside each CodeItem; Shiki handles syntax highlighting.

Basic usage

const greeting = "Hello, World!";
console.log(greeting);

greeting = "Hello, World!"
print(greeting)

package main

import "fmt"

func main() {
    greeting := "Hello, World!"
    fmt.Println(greeting)
}

npm install @barodoc/core

pnpm add @barodoc/core

yarn add @barodoc/core

bun add @barodoc/core

CodeItem — titlestring

Tab label for this code block.

CodeGroup — titlesstring[]

Optional. Fallback when CodeGroup has direct pre children (no CodeItem). Ignored when using CodeItem.