Code Block

A code viewer with syntax highlighting, a language switcher, and a copy button.

# 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 a tabs array for the multi-language form, or code + lang for a single snippet:

import { CodeBlock } from '$lib/sivir/components/code-block';

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

The built-in palette is GitHub light in light mode and GitHub dark in dark mode. For any other highlight.js theme, set theme="custom" and load its stylesheet — the component skips its own token colors:

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

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

Examples

From a single highlighted snippet to fully composed, multi-language blocks.

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 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, like the One Dark / One Light ones below — takes over.

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 keep the built-in palette and only shift its hues, override the --code-block-token-* variables on a wrapper. They inherit into the block per 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.