Code Block

bun add @heyo-sh/heyo-docs

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

CodeBlock displays source code, commands, configuration, or response samples when there is no rendered result to preview. It includes syntax highlighting and a copy control, so readers can take an example directly into their project.

Label code clearly

Set language for accurate highlighting and use title when the reader needs more context than a language label provides. Enable line numbers when the surrounding explanation refers to a specific line.

{
"contentDir": "content",
"theme": "system"
}

Use CodeSnippet instead when the same source can produce a useful live preview. Keep code blocks focused on a single operation so copying is safe and easy to understand.

Let readers edit an example

Set editable to make the code area editable. It defaults to false; when it is enabled, the copy control copies the reader's current changes rather than the initial source.

<CodeBlock editable language="json" title="reader-settings.json">
{"{ \"theme\": \"dark\" }"}
</CodeBlock>

Show a focused configuration change

A titled block with line numbers works well when the surrounding guide refers to a few lines in a longer configuration object.

export default {
  title: 'Orbit',
  theme: 'system',
  navigation: [{ title: 'Guides', path: '/quickstart' }],
};

<CodeBlock language="ts" showLineNumbers title="heyo-docs.config.ts">
{"export default {
  title: 'Orbit',
  theme: 'system',
  navigation: [{ title: 'Guides', path: '/quickstart' }],
};"}
</CodeBlock>

Properties