CodeSnippet — Loidolt Theme

import { CodeSnippet } from '@loidolt/theme-docs';

Example

npm install @loidolt/theme-docs shiki

<script lang="ts">
  import { LineChart } from '@loidolt/theme-charts';
  let { data } = $props();
</script>

<LineChart title="Sheets per month" {data} dataTable="toggle" />

Notes

Distinct from CodeBlock in @loidolt/theme-svelte, which is a single selectable value such as a key or a command.

Props

Generated from the component source, so it cannot drift from the implementation.

CodeSnippet props
Prop	Type	Default	Notes
`code` required	`string`	`—`
`class`	`string`	`—`
`copiedLabel`	`string`	`'Copied'`
`copyable`	`boolean`	`true`	Offer a copy button.
`copyLabel`	`string`	`'Copy'`
`filename`	`string`	`—`	Shown above the code, and names it.
`highlight`	`boolean`	`true`	Highlight with the registered Shiki loader, when there is one.
`label`	`string`	`—`	Names the code for assistive tech when there is no filename. Defaults to "‹lang› code".
`lang`	`string`	`''`	Language for highlighting, e.g. `ts`, `svelte`, `css`.
`ref` bindable	`HTMLElement \| null`	`null`

Plus the attributes of HTMLAttributes<HTMLElement>, forwarded to the root element.