Code

An inline code element for displaying code snippets with syntax-appropriate styling.

Anatomy

<script>
  import { Code } from "@saas-ui/svelte/typography/code";
</script>

<!-- Basic code -->
<Code>console.log("Hello")</Code>

<!-- With variant -->
<Code variant="solid">npm install</Code>

<!-- With size -->
<Code size="lg">const x = 42</Code>

Examples

Basic Accessibility

Basic inline code element with default styling for displaying code snippets.

<Code>console.log("Hello, world!")</Code>

Colours Accessibility

Use the colour prop to change the colour scheme. Supports all standard colour options.

<VStack gap={2}>
	{#each colours as colour}
		<HStack align="center" gap={10} class="w-full px-4">
			<Text size="sm" class="min-w-[8ch]">{colour}</Text>
			<Code variant="solid" colour={colour as any}>console.log()</Code>
			<Code variant="outline" colour={colour as any}
				>console.log()</Code>
			<Code variant="subtle" colour={colour as any}
				>console.log()</Code>
			<Code variant="surface" colour={colour as any}
				>console.log()</Code>
		</HStack>
	{/each}
</VStack>

Sizes Accessibility

Use the size prop to change the size of the code. Available sizes: xs, sm, md, lg.

<VStack align="start" gap={2}>
	{#each codeSizes as size}
		<HStack align="center" gap={10} class="w-full px-4">
			<Text size="sm" class="min-w-[8ch]">{size}</Text>
			<Code {size}>console.log()</Code>
		</HStack>
	{/each}
</VStack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: solid, outline, subtle, surface.

<VStack align="start" gap={2}>
	{#each codeVariants as variant}
		<HStack align="center" gap={10} class="w-full px-4">
			<Text size="sm" class="min-w-[8ch]">{variant}</Text>
			<Code {variant}>console.log()</Code>
		</HStack>
	{/each}
</VStack>

Props

Prop	Type	Default	Description
`variant`	`solid \| outline \| subtle \| surface`	`subtle`	-
`size`	`xs \| sm \| md \| lg`	`sm`	-
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.