CodeSnippet
A premium, theme-aware code snippet viewer supporting syntax highlighting, copy-to-clipboard, filenames, and line numbers.
Default (Inline Code String)
Pass a raw code snippet string directly using the code (or codeSnippet ) prop and specify the language.
typescript
typescript
const greeting = "Hello, Svelte 5!";
console.log(greeting);
function greet(user: string): string {
return `${greeting} Greeted ${user}.`;
}Text File Import (Vite ?raw)
Import code snippets directly from source files or text files by appending Vite's ?raw query suffix to the path: import mySnippet from "./file.txt?raw" .
Svelte5Example.svelte.ts
typescript
import { count, increment } from "./counterState.svelte.ts";
// Simple Svelte 5 component example
let { name = "World" } = $props();
let doubleCount = $derived(count * 2);
function handleClick() {
increment();
console.log(`Count updated: ${count}`);
}Line Numbers & Non-Copyable
You can enable line numbers using the showLineNumbers prop, or disable copying using the cancopy=false prop.
math-utility.ts
ts
123456
const greeting = "Hello, Svelte 5!";
console.log(greeting);
function greet(user: string): string {
return `${greeting} Greeted ${user}.`;
}JSON Highlighting Example
Highlighter matches themes dynamically. Below is an example highlighting JSON data.
json
json
{
"name": "@davidnet-net/svelte-ui",
"version": "2.0.28",
"private": true,
"dependencies": {
"prismjs": "^1.30.0"
}
}