Code Block

Use the shorthand with code or tabs, or compose Header, List, Actions, and Content yourself. Copy copies the raw source of the active tab.

# Import the Pinecone library
from pinecone import Pinecone

# Initialize a Pinecone client with your API key
pc = Pinecone(api_key="YOUR_API_KEY")

# Create an index for dense vectors with integrated embedding
index_name = "quickstart-py"
pc.create_index_for_model(
    name=index_name,
    cloud="aws",
    region="us-east-1",
    embed={
        "model": "llama-text-embed-v2",
        "field_map": {"text": "chunk_text"},
    },
)

// Import the Pinecone library
import { Pinecone } from '@pinecone-database/pinecone'

// Initialize a Pinecone client with your API key
const pc = new Pinecone({ apiKey: 'YOUR_API_KEY' });

// Create an index for dense vectors with integrated embedding
const indexName = 'quickstart-js';
await pc.createIndexForModel({
  name: indexName,
  cloud: 'aws',
  region: 'us-east-1',
  embed: {
    model: 'llama-text-embed-v2',
    fieldMap: { text: 'chunk_text' },
  },
  waitUntilReady: true,
});

// Initialize a Pinecone client with your API key
import io.pinecone.clients.Pinecone;
import org.openapitools.db_control.client.model.*;

Pinecone pc = new Pinecone.Builder("YOUR_API_KEY").build();

// Create an index for dense vectors with integrated embedding
String indexName = "quickstart-java";
pc.createIndexForModel(
    indexName,
    CreateIndexForModelRequest.CloudEnum.AWS,
    "us-east-1",
    new CreateIndexForModelRequestEmbed()
        .model("llama-text-embed-v2")
        .fieldMap(Map.of("text", "chunk_text")),
    DeletionProtection.DISABLED,
    null
);

// Initialize a Pinecone client with your API key
import "github.com/pinecone-io/go-pinecone/v3/pinecone"

pc, err := pinecone.NewClient(pinecone.NewClientParams{
    ApiKey: "YOUR_API_KEY",
})

// Create an index for dense vectors with integrated embedding
indexName := "quickstart-go"
index, err := pc.CreateIndexForModel(ctx, &pinecone.CreateIndexForModelRequest{
    Name:   indexName,
    Cloud:  pinecone.Aws,
    Region: "us-east-1",
    Embed: pinecone.CreateIndexForModelEmbed{
        Model:    "llama-text-embed-v2",
        FieldMap: map[string]interface{}{"text": "chunk_text"},
    },
})

// Initialize a Pinecone client with your API key
using Pinecone;

var pc = new PineconeClient("YOUR_API_KEY");

// Create an index for dense vectors with integrated embedding
var indexName = "quickstart-cs";
var index = await pc.CreateIndexForModelAsync(new CreateIndexForModelRequest
{
    Name = indexName,
    Cloud = CreateIndexForModelRequestCloud.Aws,
    Region = "us-east-1",
    Embed = new CreateIndexForModelRequestEmbed
    {
        Model = "llama-text-embed-v2",
        FieldMap = new Dictionary<string, object?> { { "text", "chunk_text" } },
    },
});

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add code-block

The component depends on highlight.js. Install it if your project doesn't have it yet:

Copy the command below and run it in your terminal.

bun add highlight.js

Usage

Pass code and lang for one snippet, or a tabs array for several. Root's value picks the open tab by matching each tab's value, which defaults to its lang. It is bindable and starts on the first tab.

import { CodeBlock } from '@sivir-ui/svelte/components/code-block';

<CodeBlock
  value="javascript"
  tabs={[
    { label: 'Python',     lang: 'python',     code: pyCode },
    { label: 'JavaScript', lang: 'javascript', code: jsCode },
  ]}
/>

The default theme colors tokens with GitHub light and GitHub dark, and theme presets set their own palette. To use a highlight.js theme instead, set theme="custom" and load its stylesheet. The component then skips its own token colors.

import 'highlight.js/styles/github-dark.css';
import { CodeBlock } from '@sivir-ui/svelte/components/code-block';

<CodeBlock code={code} lang="typescript" theme="custom" />

Examples

Single snippet

const greet = (name: string) => {
  return `Hello, ${name}!`;
};

console.log(greet('world'));

Multiple languages

export async function getUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}

Line numbers

def fib(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

print([fib(i) for i in range(10)])

Custom actions

SELECT id, email, created_at
FROM users
WHERE created_at > now() - interval '7 days'
ORDER BY created_at DESC
LIMIT 50;

Copy placement: overlay

model = SentenceTransformer("all-MiniLM-L6-v2")
embeddings = model.encode(documents)
index.upsert(vectors=zip(ids, embeddings))

Copy placement: inline

bunx @sivir-ui/svelte add code-block

Compound API

npm install @sivir-ui/svelte
npx @sivir-ui/svelte add code-block

Custom theme: stylesheet

With theme="custom" the block paints no token colors itself, so a stock highlight.js stylesheet or your own hljs-* rules take over. This example uses One Dark and One Light rules.

export async function getUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}

Custom theme: variables

To recolor tokens without a stylesheet, set the nine --code-block-token-* variables on a wrapper, then set them again under .dark for dark mode.

export async function getUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}

Anatomy

CodeBlock.Root - Provides code block state and layout.

CodeBlock.Header - Renders the code block header.

CodeBlock.List - Groups code language tabs.

CodeBlock.Trigger - Selects a code language tab.

CodeBlock.Actions - Groups code block actions.

CodeBlock.Copy - Copies the active code snippet.

CodeBlock.Content - Renders a code snippet panel.

CodeBlock - Renders a high-level code block.