SSR-safe syntax-highlighted code with line numbers, diffs, emphasis, filenames, and copy support.
This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.
aq-uipnpm dlx aq-ui@alpha add code-blockImport the parts you need, then jump to an export for its contract.
import { CodeBlock } from "@/components/ui/code-block"
<CodeBlock />SSR-safe syntax-highlighted code with line numbers, diffs, emphasis, filenames, and copy support.
function CodeBlock({ code, language = "plaintext", filename, lineNumbers = false, wrapLines = false, highlightedLines: emphasizedLines = [], diff = "none", copyButton = true, maxHeight, onCopyError, className, style, ...props }: CodeBlockProps)Type contract for CodeBlockDiff.
type CodeBlockDiff = "none" | "added" | "removed" | "mixed"Type contract for CodeBlockLanguage.
export type { CodeBlockLanguage } from "@/lib/code-highlighter"@/lib/code-highlighterType contract for CodeBlockProps.
interface CodeBlockProps extends Omit< React.ComponentProps<"figure">, "children" >| Name | Type | Default |
|---|---|---|
code | string | — |
language? | CodeBlockLanguage | "plaintext" |
filename? | string | — |
lineNumbers? | boolean | false |
wrapLines? | boolean | false |
highlightedLines? | readonly number[] | [] |
diff? | CodeBlockDiff | "none" |
copyButton? | boolean | true |
maxHeight? | string | number | — |
onCopyError? | (error: Error) => void | — |
Public function export from Code Block.
export { normalizeHighlightLanguage } from "@/lib/code-highlighter"@/lib/code-highlightercode-block-copy-button, code-highlighter, utils
type RegistryItem = {
name: string
dependencies: string[]
}
export function install(item: RegistryItem) {
return item.dependencies.map((dependency) => ({
dependency,
source: `https://aq-ui.dev/r/${dependency}.json`,
}))
}