Components

Code

Syntax-highlighted code display with Svelte support and one-click copying.

Preview

Counter.svelte

<script lang="ts">  let count = $state(0);</script><button onclick={() => count++}>  Clicked {count} times</button>

code.demo.svelte

<script lang="ts">	import { Code } from '$lib/components/ui/code';	const example = [		'<script lang="ts">',		'  let count = $state(0);',		'<' + '/script>',		'',		'<button onclick={() => count++}>',		'  Clicked {count} times',		'</button>'	].join('\n');</script><Code code={example} language="svelte" label="Counter.svelte" class="w-full max-w-xl" />

Installation

Install directly from the hosted registry with the shadcn-svelte CLI.

Terminal

npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

yarn dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

bun x shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Usage

Pass the source text, its language, and an optional filename label. The highlighter is shared across every instance.

API reference

Prop	Type	Default
code	string	required
language	svelte \| typescript \| javascript \| json \| shellscript \| text	svelte
label	string	language
showCopy	boolean	true

Source

These files are included in the registry item and copied into the consuming project.

code.svelte

<script lang="ts">	import { cw } from '$lib/utils';	import { highlightCode, type CodeLanguage } from './highlighter';	let {		code,		language = 'svelte',		label = language,		showCopy = true,		class: className	}: {		code: string;		language?: CodeLanguage;		label?: string;		showCopy?: boolean;		class?: string;	} = $props();	let copied = $state(false);	const lines = $derived(highlightCode(code, language));	async function copy() {		await navigator.clipboard.writeText(code);		copied = true;		setTimeout(() => (copied = false), 1500);	}</script><div	data-slot="code"	class={cw('overflow-hidden rounded-lg border border-border bg-foreground', className)}>	<div		class="flex h-11 items-center justify-between border-b border-white/10 px-4 text-xs text-white/60"	>		<span>{label}</span>		{#if showCopy}			<button				onclick={copy}				class="rounded px-2 py-1 transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"				aria-label={`Copy ${label}`}			>				{copied ? 'Copied' : 'Copy'}			</button>		{/if}	</div>	<pre class="max-h-[34rem] overflow-auto bg-foreground p-4 font-mono text-[13px] leading-6"><code			class="grid min-w-max"			>{#each lines as line, lineIndex (lineIndex)}<span class="min-h-6"					>{#each line as token, tokenIndex (`${tokenIndex}-${token.content}`)}<span							style:color={token.color}							class:italic={Boolean(token.fontStyle && token.fontStyle & 1)}							class:font-bold={Boolean(token.fontStyle && token.fontStyle & 2)}							class:underline={Boolean(token.fontStyle && token.fontStyle & 4)}							>{token.content}</span						>{/each}</span				>{/each}</code		></pre></div>

highlighter.ts

import javascript from '@shikijs/langs/javascript';import json from '@shikijs/langs/json';import shellscript from '@shikijs/langs/shellscript';import svelte from '@shikijs/langs/svelte';import typescript from '@shikijs/langs/typescript';import githubDark from '@shikijs/themes/github-dark';import { createHighlighterCore } from 'shiki/core';import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';export type CodeLanguage = 'svelte' | 'typescript' | 'javascript' | 'json' | 'shellscript' | 'text';const highlighter = await createHighlighterCore({	themes: [githubDark],	langs: [svelte, typescript, javascript, json, shellscript],	engine: createJavaScriptRegexEngine()});export function highlightCode(code: string, language: CodeLanguage) {	return highlighter.codeToTokens(code.trimEnd(), {		lang: language,		theme: 'github-dark'	}).tokens;}export function languageFromFilename(filename: string): CodeLanguage {	if (filename.endsWith('.svelte')) return 'svelte';	if (filename.endsWith('.ts')) return 'typescript';	if (filename.endsWith('.js')) return 'javascript';	if (filename.endsWith('.json')) return 'json';	return 'text';}

index.ts

export { default as Code } from './code.svelte';export { languageFromFilename } from './highlighter';export type { CodeLanguage } from './highlighter';