CodeBlock

components/cards/CodeBlock.tsx

Note: always-dark background regardless of active theme (by design)

language

With language label

language prop shows a label in the header bar

json

{
  "name": "!duel",
  "cooldown": 30,
  "requiredPrivilege": "viewer",
  "precheckHandler": "hasPoints",
  "successHandler": "transferPoints",
  "failHandler": "deductPoints"
}

typescript

TypeScript

Different content type — same always-dark render

typescript

export type CommandHandler = {
  name: string
  cooldown: number
  requiredPrivilege: 'viewer' | 'mod' | 'admin'
  handler: (ctx: CommandContext) => Promise<void>
}

bash

Bash

Multi-line shell commands

bash

# Install dependencies and start dev server
npm install
npm run dev

# Run type check
npx tsc --noEmit

copyable

copyable prop

copyable=true (default) / copyable=false

javascript

const greeting = "Hello, world!"

copyable=false — no copy button, no header bar (if no language either)

const greeting = "Hello, world!"

no-label

No language, no copy

Neither language nor copyable=true — just a code pre block

SELECT * FROM commands WHERE enabled = true ORDER BY uses DESC LIMIT 10

real-world

Real-world usage

Inline docs — command configuration reference

Command configuration object — paste into your bot config file:

json

{
  "name": "!duel",
  "cooldown": 30,
  "requiredPrivilege": "viewer",
  "precheckHandler": "hasPoints",
  "successHandler": "transferPoints",
  "failHandler": "deductPoints"
}