Code

Write copyable inline and block code examples that make technical steps safe to follow.

Terminal

bun add @heyo-sh/heyo-docs

<CodeBlock language="bash" title="Terminal">
{"bun add @heyo-sh/heyo-docs"}
</CodeBlock>

Code samples should answer a specific implementation question and be safe to copy. Use inline code for a short literal value, then use a fenced block or CodeBlock as soon as a reader needs more than one line. Always state what a command changes before asking someone to run it.

Choose inline code or a block

Inline code is best for names that belong inside a sentence: a file such as heyo-docs.config.ts, a key such as content, or a command flag such as --watch. A fenced block is better for an independent command, configuration fragment, API response, or complete example.

bash

bun add @heyo-sh/heyo-docsbun run dev

Add a language after the opening fence whenever you can. It improves syntax highlighting and makes the purpose of the sample obvious at a glance. Use bash for commands, ts or tsx for TypeScript, json for data, and md for Markdown. Each newline inside a fenced block is rendered as a hard code line, never as a space.

Give configuration enough context

Use a short fenced block when a reader only needs the source. Switch to CodeBlock when the example benefits from a title or line numbers—for example, when a guide refers back to a particular setting in a shared configuration file.

heyo-docs.config.ts

export default heyoDocs({
title: "Orbit docs",
content: "content",
});

This is a useful pattern for onboarding and migration guides: show the smallest working configuration, then explain any project-specific options in the prose around it. Avoid dumping an entire production config if only three lines are relevant to the task.

Compare equivalent commands

When readers may use different package managers or runtimes, group equivalent commands in tabs. The active tab remains copyable, so the example stays compact without making any option feel secondary.

bun add @heyo-sh/heyo-docs

<CodeBlockGroup>
<CodeBlock language="bash" title="Bun">
  {"bun add @heyo-sh/heyo-docs"}
</CodeBlock>
<CodeBlock language="bash" title="npm">
  {"npm install @heyo-sh/heyo-docs"}
</CodeBlock>
</CodeBlockGroup>

Use this for genuinely equivalent choices such as package managers, deployment hosts, or framework adapters. If the steps differ in purpose rather than only syntax, give each workflow its own heading instead of hiding it in a tab.

Properties

```languageMarkdown fenceoptional

Starts a standard fenced code block. The optional language—for example bash, ts, json, or md —selects syntax highlighting.

languagestringoptional

A CodeBlock or CodeBlockGroup child prop that selects syntax highlighting. It defaults to plain text.

titleReactNodeoptional

A CodeBlock prop that labels the sample, usually with a file name, command environment, or package manager.

showLineNumbersbooleanoptional

A CodeBlock prop that adds line numbers when the surrounding explanation needs to cite a particular line. It defaults to false.

childrenReactNodeoptional

The exact code shown and copied by a CodeBlock. Keep it small enough that a reader can understand the effect before copying it.

variant"default" | "line"optional

A CodeBlockGroup prop that changes the tab treatment for equivalent code samples. It defaults to default.