# antuikit / CodeHighlighter

> CodeHighlighter, a code block with syntax colors and a copy button. Colors the code from the theme so it follows dark mode, draws the copy glyphs from the icon pack, and merges `className` through `cn()`.

Docs: https://antuikit.com/docs/components/code-highlighter

## Install

npx antuikit@latest init
npx antuikit@latest add code-highlighter

## Import

import { CodeHighlighter } from "@/components/ui/code-highlighter";

## Demos

- [Basic](https://ui.antuikit.com/embed/code-highlighter/basic.md): Pass the code as `children` and its language as `lang` to color it, with the language name and a copy button above.
- [Language](https://ui.antuikit.com/embed/code-highlighter/language.md): Set `lang` to any Prism language name, like `bash` for a shell command or `json` for a config file.
- [Without header](https://ui.antuikit.com/embed/code-highlighter/no-header.md): Set `header` to `false` to show the code alone, or pass a node to replace the language name and copy button.
- [Custom header](https://ui.antuikit.com/embed/code-highlighter/custom-header.md): Pass `header` a node to replace the language bar with your own, like a file name and run or share buttons.
- [Chat reply](https://ui.antuikit.com/embed/code-highlighter/chat-reply.md): An assistant reply in a `Bubble` that answers with a code block the user can copy.
- [Code review](https://ui.antuikit.com/embed/code-highlighter/review-diff.md): A code review thread where an assistant replies to a comment with a diff of the fix and a button to apply it.
- [API reference](https://ui.antuikit.com/embed/code-highlighter/api-docs.md): An API reference card for one endpoint, with tabs that switch the request example between cURL, JavaScript and Python.
- [Generated config](https://ui.antuikit.com/embed/code-highlighter/generated-config.md): A chat where the user attaches package.json and the assistant answers with a test config file to download.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/code-highlighter`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `CodeHighlighter` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.