#121
Languages
Three CodeSnippet blocks highlighting Svelte, TypeScript and CSS sources.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Languages" pattern (@codeatlasdev/ui demo #121, display/code-snippet) in my app.
Call get_demo({ ids: ["#121"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + shiki.
Use: Documentation or settings pages that display code samples with syntax highlighting.
Keep these library parts, with the props and tokens the demo uses:
- CodeSnippet from "@codeatlasdev/ui/code"
Behaviour to keep:
- `import { CodeSnippet } from '@codeatlasdev/ui/code'` is the entry point
- `<CodeSnippet code={svelte} language="svelte" />` shows an `AppList` markup sample
- `<CodeSnippet code={ts} language="typescript" />` shows a `useListState` call
- `<CodeSnippet code={css} language="css" />` shows rules using design tokens
- Wrapper `.col` has `width: 100%`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- CodeSnippet
@codeatlasdev/ui/code
How it is built
- `import { CodeSnippet } from '@codeatlasdev/ui/code'` is the entry point
- `<CodeSnippet code={svelte} language="svelte" />` shows an `AppList` markup sample
- `<CodeSnippet code={ts} language="typescript" />` shows a `useListState` call
- `<CodeSnippet code={css} language="css" />` shows rules using design tokens
- Wrapper `.col` has `width: 100%`
Related
Loading source.