Code Block

Highlighted code with a file name, line numbers, marked lines, wrap and copy, plus tabs for several files and a line diff in unified or split view.

Base UI React Aria Radix UI

lib/invoices.ts

1import { db } from "@/lib/db"2import { sendEmail } from "@/lib/email"34export async function sendInvoice(id: string) {5  const invoice = await db.invoice.findUnique({ where: { id } })6  if (!invoice) throw new Error("Invoice not found")78  const total = invoice.lines.reduce((sum, line) => sum + line.qty * line.price, 0)9  await db.invoice.update({ where: { id }, data: { total, sentAt: new Date() } })1011  await sendEmail({12    to: invoice.client.email,13    subject: `Invoice ${invoice.number} from vwork Digital`,14    template: "invoice",15    data: { invoice, total },16  })1718  return { id, total }19}2021export async function markPaid(id: string, amount: number) {22  const invoice = await db.invoice.update({23    where: { id },24    data: { paidAt: new Date(), paidAmount: amount },25  })26  return invoice27}

npm install @another-ui/code-block shiki

lib/invoice-total.ts+5-6

1-Removed: export function invoiceTotal(lines: Line[]) {2-Removed:   let total = 03-Removed:   for (const line of lines) {4-Removed:     total += line.qty * line.price5-Removed:   }6-Removed:   return total1+Added: export function invoiceTotal(lines: Line[], taxRate = 0.05) {2+Added:   const subtotal = lines.reduce((sum, line) => sum + line.qty * line.price, 0)3+Added:   const discount = lines.reduce((sum, line) => sum + (line.discount ?? 0), 0)4+Added:   const tax = (subtotal - discount) * taxRate5+Added:   return Math.round((subtotal - discount + tax) * 100) / 10076 }

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/code-block.json

Usage

import { CodeBlock, CodeBlockTabs, CodeDiff } from "@/components/ui/code-block"

<CodeBlock
  code={source}
  language="ts"
  filename="lib/invoices.ts"
  highlightLines={[8, "10-15"]}
  maxHeight={280}
/>
 
<CodeBlockTabs
  tabs={[
    { value: "npm", code: "npm install shiki" },
    { value: "pnpm", code: "pnpm add shiki" },
    { value: "bun", code: "bun add shiki" },
  ]}
/>
 
<CodeDiff before={oldSource} after={newSource} language="ts" filename="lib/invoice-total.ts" />

Parts

CodeBlock. Shows code in language with line numbers. highlightLines takes numbers and ranges such as [3, "5-7"]. maxHeight clamps the block in pixels and adds Expand. The header shows the file name and a language icon, a wrap toggle and copy. Set header={false} to float copy over the code instead.
CodeBlockTabs. One block with a tab per entry in tabs, for package managers or several files. Copy takes the open tab.
CodeDiff. Diffs before against after line by line and counts what was added and removed. Unified shows both in one column with old and new line numbers. Split puts them side by side, and stacks Before over After on narrow screens.
CodeBlockCopy and CodeBlockHeader. The copy button and header bar, for building your own layout.

Long lines scroll inside the block, never the page. The plain text shows until Shiki is ready, so nothing jumps.

Citations Collapsible

On This Page

Installation Usage Parts

Code Block

Installation#

Usage#

Parts#

Code Block

Installation#

Usage#

Parts#

Installation

Usage

Parts

Installation

Usage

Parts