Highlighted Code

function greet(name) {
  return `Hello, ${name}!`;
}

1
2
3import type { ReactNode } from 'react';

import { HighlightedCode } from '@/registry/bases/base-ui/components/data-display/highlighted-code';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/highlighted-code.json

Usage#

import { HighlightedCode } from '@/components/data-display/highlighted-code';

<pre className="bg-muted rounded-md p-3 text-xs leading-relaxed">
  <HighlightedCode lines={lines}>{code}</HighlightedCode>
</pre>

lines is what highlightToLines resolves to; while it is still null, children (the raw source) keeps the code readable before the grammar loads. Use it for already-tokenized source with no card chrome; for a self-contained, read-only block with a header, copy action and line numbers, compose Code Block instead.

API reference#

HighlightedCode#

Renders a code and takes every prop a code takes, plus:

Tokenized lines render as styled spans in order, with a newline between lines; while lines is null it renders children instead. It sets data-slot="highlighted-code".