Content
Code Block
Shiki-highlighted code block with a filename header, line numbers, line highlighting, copy and an optional edit action.
A syntax-highlighted code block powered by Shiki. The highlighter is loaded on demand the first time a block renders, so it never ships in the initial bundle. Shows an optional filename header, line numbers, highlighted lines, a copy button, and — when you pass onEdit — an "Edit" action that hands back the code payload. Pass the code as the child string.
Import
tsx
1import { CodeBlock, InlineCode } from "@yuhuanowo/yunui/content";Example
CodeBlock
button.tsx
export function Button({ label }: { label: string }) {
return <button className="btn btn-primary">{label}</button>;
}Inline code
InlineCode renders a single token inside prose.
InlineCode
Run pnpm build then restart the dev server.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | string | — | The code to render, as a string. |
| language | string | — | Language id for highlighting (e.g. tsx, python, bash). |
| filename | string | — | Shown in the block header; also passed to onEdit. |
| showLineNumbers | boolean | false | Render a line-number gutter. |
| highlightLines | number[] | — | 1-based line numbers to emphasize. |
| onEdit | (payload: CodeBlockEditPayload) => void | — | When set, shows an Edit button that calls this with { code, language, filename }. |
| className | string | — | Extra classes on the wrapper. |