data · Normal DOM only

CodeBlock

Syntax-highlighted code block — prism-react-renderer with Twenty-coloured theme. Copy button included.

Use CodeBlock to display source, configuration, or shell commands. Syntax colours come from --t-code-text-* and --t-font-color-* — light/dark switches automatically.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { CodeBlock } from '@8maverik8/twenty-design';

Examples

TypeScript + bash

application-config.tsts
import { defineApplication } from 'twenty-sdk/define';


export default defineApplication({
  universalIdentifier: 'a1b2c3d4-0000-4000-8000-000000000000',
  displayName: 'OAPPS Deal Items',
  icon: 'IconReceipt',
});
bash
1pnpm add @8maverik8/twenty-tokens \
2        @8maverik8/twenty-design \
3        @8maverik8/twenty-icons
4

5yarn twenty dev
6yarn twenty deploy --remote production
tsx
<CodeBlock language="ts" filename="application-config.ts" code={…} />

Guidelines

✓
Specify the language for accurate tokenising.Without it prism falls back to plain text — keywords don't colour.
✓
Use filename to disambiguate one of several snippets.The chrome bar is also where the copy button lives.