Display

CodeSnippet

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.

bun add shiki

npm i shiki

pnpm add shiki

<script>
  import { CodeSnippet } from "@codeatlasdev/ui/code";
</script>

<CodeSnippet code={source} language="typescript" />

The theme switches between a light and a dark high-contrast Shiki theme when the color scheme changes.

Languages

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);
}

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>

Props

Prop	Type	Default	Description
`code`	`string`	–	Source code to display. Required.
`language`	`string`	`'svelte'`	Shiki language identifier.
`class`	`string`	`''`	Extra class names.