Code Block

A component for displaying code snippets with syntax highlighting and customizable styling.

function greet(name: string) {
  return `Hello, ${name}!`;
}

// Call the function
const greeting = greet("World");
console.log(greeting);

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/code-block.json

Examples

Theme

<script lang="ts">
  import { writable } from 'svelte/store';

  const todos = writable([
    { id: 1, text: 'Learn Svelte', done: false },
    { id: 2, text: 'Build an app', done: false }
  ]);

  function addTodo(text: string) {
    todos.update(items => [
      ...items,
      { id: Date.now(), text, done: false }
    ]);
  }

  function toggleTodo(id: number) {
    todos.update(items =>
      items.map(item =>
        item.id === id ? { ...item, done: !item.done } : item
      )
    );
  }
</script>

<div class="todo-list">
  {#each $todos as todo}
    <div class="todo-item">
      <input
        type="checkbox"
        checked={todo.done}
        onchange={() => toggleTodo(todo.id)}
      />
      <span class:done={todo.done}>{todo.text}</span>
    </div>
  {/each}
</div>

<style>
  .done {
    text-decoration: line-through;
    opacity: 0.6;
  }
</style>

Header

Svelte

counter.svelte

<script lang="ts">
  let count = $state(0);

  function increment() {
    count++;
  }
</script>

<div>
  <p>You clicked {count} times</p>
  <button onclick={increment}>
    Click me
  </button>
</div>

Props

Code Block

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...props`	`HTMLAttributes<HTMLDivElement>`

Code Block Code

Name	Type	Default
`code`	`string`
`language`	`string`	`"tsx"`
`theme`	`string`	`"github-light"`
`class`	`string`
`...props`	`HTMLAttributes<HTMLDivElement>`

Code Block Group

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...props`	`HTMLAttributes<HTMLDivElement>`