Syntax-highlighted code block with a copy button, highlighted by Shiki and following the current color scheme.
CodeSnippet lives in its own entry point so that Shiki stays out of bundles that do not need it. Install the optional peer first.
The theme switches between a light and a dark high-contrast Shiki theme when the color scheme changes.
#121Languages
Svelte, TypeScript and CSS.
<AppList title="Users" data={ALL} searchKeys={['name', 'email']} perPage={8}>
{#snippet children(list)}
{#each list.rows as u (u.id)}
<tr><td>{u.name}</td></tr>
{/each}
{/snippet}
</AppList>
const list = useListState({
data: ALL,
perPage: 8,
searchKeys: ['name', 'email'],
});
/* Using design tokens */
.my-component {
font-size: var(--ca-font-size-body2);
color: var(--ca-text-primary);
border: 1px solid var(--ca-outline-subtle);
}
Reference #121 · Pick in the gallery
Code
<script lang="ts">
import { CodeSnippet } from '@codeatlasdev/ui/code';
const svelte = `<AppList title="Users" data={ALL} searchKeys={['name', 'email']} perPage={8}>
{#snippet children(list)}
{#each list.rows as u (u.id)}
<tr><td>{u.name}</td></tr>
{/each}
{/snippet}
</AppList>`;
const ts = `const list = useListState({
data: ALL,
perPage: 8,
searchKeys: ['name', 'email'],
});`;
const css = `/* Using design tokens */
.my-component {
font-size: var(--ca-font-size-body2);
color: var(--ca-text-primary);
border: 1px solid var(--ca-outline-subtle);
}`;
</script>
<div class="col">
<CodeSnippet code={svelte} language="svelte" />
<CodeSnippet code={ts} language="typescript" />
<CodeSnippet code={css} language="css" />
</div>
<style>
.col { display: flex; flex-direction: column; gap: var(--ca-space-3); width: 100%; }
</style>