Code Block

Code with token highlighting, a copy button and an optional line-by-line reveal for quickstarts.

app/page.tsx

import { Button } from "@/components/ui/button";export default function Page() {  return <Button>Approve</Button>;}

npx @aedis/cli@0.1.0 add approval-cardpnpm dev

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css

@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add code-block# pnpm dlx @aedis/cli@0.1.0 add code-block · yarn dlx @aedis/cli@0.1.0 add code-block · bunx @aedis/cli@0.1.0 add code-block

Props

Prop	Type	Default	Description
code	string	—	The code, rendered as text. Copy copies exactly this.
lang	string	"text"	Any language shiki bundles; unknown ones are plain text.
title	string	—	Shown above the code, e.g. a file name.
animated	boolean	false	Reveal lines one by one when scrolled into view, once. Off under reduced motion.
lineDelay	number	120	Milliseconds between lines when animated.
labels	Partial<CodeBlockLabels>	—	copy, copied, copyFailed, hidden.

Security

Highlighting comes from shiki tokens rendered as React text, never codeToHtml; token colors are limited to the theme's --syntax-* variables.
Bidi controls and zero-width characters are shown as visible U+XXXX markers instead of being removed (Trojan Source, CVE-2021-42574).
Copy happens only on a click, as plain text, and copies the original code without the markers.
Uses shiki's JavaScript regex engine: no WebAssembly, so a CSP without 'wasm-unsafe-eval' keeps working.