Code Block

<script lang="ts">
  import type { CodeBlockProps } from './types.js';
  import { cn } from 'cn';
  import { codeBlockVariants } from './variants.js';
  let { children, class: classProp, variant = 'default', size = 'default', ...props }: CodeBlockProps = $props();
</script>
<div data-slot="code-block" data-variant={variant} data-size={size} {...props} class={cn(codeBlockVariants({ variant }), classProp)}>
  {@render children?.()}
</div>

<script lang="ts">
  import type { CodeBlockActionsProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: CodeBlockActionsProps = $props();
</script>
<div
  data-slot="code-block-actions"
  {...props}
  class={cn(
    '-my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:end-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100',
    classProp,
  )}
>
  {@render children?.()}
</div>

<script lang="ts">
  import type { CodeBlockContentProps } from './types.js';
  import { cn } from 'cn';
  import CodeBlockLine from './CodeBlockLine.svelte';
  let { children, class: classProp, code, wrap = false, lineNumbers = false, startLine = 1, style, ...props }: CodeBlockContentProps = $props();
</script>
<!-- The content scrolls, so it takes focus for keyboard scrolling. -->
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<pre
  data-slot="code-block-content"
  data-wrap={wrap || undefined}
  data-numbered={lineNumbers || undefined}
  dir="ltr"
  tabindex={0}
  {...props}
  style="counter-reset: line {startLine - 1};{style ?? ''}"
  class={cn(
    'px-3 py-3 leading-relaxed group-has-data-[slot=code-block-header]/code-block:pt-2 group-has-data-[slot=code-block-footer]/code-block:pb-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto text-start font-mono outline-none data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap',
    classProp,
  )}><code data-slot="code-block-code" class="grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0"
    >{#if code !== undefined && lineNumbers}{#each code.replace(/\n$/, '').split('\n') as line, index (index)}<CodeBlockLine>{line}</CodeBlockLine>{/each}{:else if code !== undefined}{code}{:else}{@render children?.()}{/if}</code
  ></pre>

<script lang="ts">
  import type { CodeBlockCopyButtonProps } from './types.js';
  import { cn } from 'cn';
  import { Button } from '../button/index.js';
  import CheckIcon from '@lucide/svelte/icons/check';
  import CopyIcon from '@lucide/svelte/icons/copy';
  let { value, variant = 'ghost', size = 'icon-xs', class: classProp, onclick, ...props }: CodeBlockCopyButtonProps = $props();
  let copied = $state(false);

  $effect(() => {
    if (!copied) return;
    const timeout = setTimeout(() => (copied = false), 2000);
    return () => clearTimeout(timeout);
  });
</script>
<Button
  data-slot="code-block-copy-button"
  data-copied={copied || undefined}
  {variant}
  {size}
  aria-label={copied ? 'Copied' : 'Copy'}
  class={cn('', classProp)}
  onclick={(event) => {
    onclick?.(event);
    // The clipboard is undefined outside a secure context.
    navigator.clipboard
      ?.writeText(value)
      .then(() => (copied = true))
      .catch(() => {});
  }}
  {...props}
>
  {#if copied}
    <CheckIcon />
  {:else}
    <CopyIcon />
  {/if}
</Button>
<span aria-live="polite" class="sr-only">{copied ? 'Copied' : ''}</span>

<script lang="ts">
  import type { CodeBlockFooterProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: CodeBlockFooterProps = $props();
</script>
<div data-slot="code-block-footer" {...props} class={cn('gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5 flex min-w-0 shrink-0 items-center', classProp)}>
  {@render children?.()}
</div>

<script lang="ts">
  import type { CodeBlockHeaderProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: CodeBlockHeaderProps = $props();
</script>
<div data-slot="code-block-header" {...props} class={cn('gap-2 px-3 pt-3 text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0', classProp)}>
  {@render children?.()}
</div>

<script lang="ts">
  import type { CodeBlockLineProps } from './types.js';
  import { untrack } from 'svelte';
  import { cn } from 'cn';
  import { codeBlockLineVariants } from './variants.js';
  let { children, class: classProp, variant = 'default', ...props }: CodeBlockLineProps = $props();

  // An empty line holds a newline so copying a selection keeps blank lines. A snippet cannot be inspected for
  // emptiness, so the rendered content is watched instead.
  const newline = '\n';
  let empty = $state(true);
  function watchContent(node: HTMLElement) {
    // Only the newline this line added itself is discounted, so content that is a newline does not toggle forever.
    const sync = () => (empty = node.childElementCount === 0 && node.textContent === (untrack(() => empty) ? newline : ''));
    sync();
    const observer = new MutationObserver(sync);
    observer.observe(node, { childList: true, characterData: true, subtree: true });
    return () => observer.disconnect();
  }
</script>
<span data-slot="code-block-line" data-variant={variant} {...props} class={cn(codeBlockLineVariants({ variant }), classProp)}>
  <span data-slot="code-block-line-content" class="min-w-0" {@attach watchContent}>{@render children?.()}{#if empty}{newline}{/if}</span>
</span>

<script lang="ts">
  import type { CodeBlockTitleProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: CodeBlockTitleProps = $props();
</script>
<div data-slot="code-block-title" {...props} class={cn("font-sans text-sm font-medium text-foreground group-data-[variant=destructive]/code-block:text-destructive *:[svg]:me-1.5 [&_svg:not([class*='size-'])]:size-3.5 group-data-[size=sm]/code-block:text-xs min-w-0 truncate [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle", classProp)}>
  {@render children?.()}
</div>

// Adapted from shadcn-ui/ui d2fba50e; MIT: apps/docs/registry/THIRD_PARTY_NOTICES.md.
import { createHighlighterCore, type GrammarState, type HighlighterCore } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';

// Add the languages you need. Each one loads the first time it is used.
const languages = {
  bash: () => import('shiki/langs/shellscript.mjs'),
  css: () => import('shiki/langs/css.mjs'),
  diff: () => import('shiki/langs/diff.mjs'),
  html: () => import('shiki/langs/html.mjs'),
  javascript: () => import('shiki/langs/javascript.mjs'),
  json: () => import('shiki/langs/json.mjs'),
  jsx: () => import('shiki/langs/jsx.mjs'),
  markdown: () => import('shiki/langs/markdown.mjs'),
  python: () => import('shiki/langs/python.mjs'),
  sql: () => import('shiki/langs/sql.mjs'),
  tsx: () => import('shiki/langs/tsx.mjs'),
  typescript: () => import('shiki/langs/typescript.mjs'),
  yaml: () => import('shiki/langs/yaml.mjs'),
};

const aliases: Record<string, keyof typeof languages> = {
  js: 'javascript',
  md: 'markdown',
  py: 'python',
  sh: 'bash',
  shell: 'bash',
  shellscript: 'bash',
  ts: 'typescript',
  yml: 'yaml',
  zsh: 'bash',
};

let highlighter: Promise<HighlighterCore> | undefined;

function getHighlighter() {
  highlighter ??= createHighlighterCore({
    themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
    langs: [],
    engine: createJavaScriptRegexEngine({ forgiving: true }),
  });
  return highlighter;
}

function getLanguage(language: string) {
  const name = language.toLowerCase();
  if (name === 'ansi') return name;
  if (name in languages) return name as keyof typeof languages;
  return aliases[name] ?? null;
}

export function escapeHtml(text: string) {
  return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
}

const styleOf = (style: Record<string, string> | undefined) =>
  style ? Object.entries(style).map(([property, value]) => `${property}:${value}`).join(';') : '';

/** Loads a language and returns a highlighter for it, or null for a language that is not listed. */
export async function loadHighlighter(language: string) {
  const lang = getLanguage(language);
  if (!lang) return null;
  const shiki = await getHighlighter();
  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) await shiki.loadLanguage(languages[lang]);

  return {
    /**
     * Returns one HTML string per line, for `{@html}` in a `CodeBlockLine`, and the grammar state after the last
     * line. Pass that state back to continue where the code left off.
     */
    highlight(code: string, state?: GrammarState) {
      const tokenize = (text: string) =>
        shiki.codeToTokens(text, { lang, themes: { light: 'github-light', dark: 'github-dark' }, defaultColor: false, grammarState: state }).tokens;

      // ANSI has no grammar state, so each line is tokenized on its own and gets the same colors whether it arrives
      // in one piece or streams.
      const tokens = lang === 'ansi' ? code.split('\n').flatMap((line) => tokenize(line)) : tokenize(code);

      return {
        lines: tokens.map((line) =>
          line
            .map((token) => `<span style="${escapeHtml(styleOf(token.htmlStyle)).replaceAll('"', '&quot;')}" class="text-(--shiki-light) dark:text-(--shiki-dark)">${escapeHtml(token.content)}</span>`)
            .join(''),
        ),
        state: shiki.getLastGrammarState(tokens),
      };
    },
  };
}

export type Highlighter = NonNullable<Awaited<ReturnType<typeof loadHighlighter>>>;

/** Returns one HTML string per line. A language that is not listed comes back as escaped plain text. */
export async function highlightCode(code: string, language: string) {
  const highlighter = await loadHighlighter(language);
  return highlighter ? highlighter.highlight(code).lines : code.split('\n').map(escapeHtml);
}

import type { HTMLAttributes } from 'svelte/elements';
import type { ButtonProps } from '../button/index.js';
import type { CodeBlockLineVariants, CodeBlockVariants } from './variants.js';

type NativeDivProps = HTMLAttributes<HTMLDivElement>;

export type CodeBlockProps = NativeDivProps & CodeBlockVariants & { size?: 'default' | 'sm' };
export type CodeBlockHeaderProps = NativeDivProps;
export type CodeBlockTitleProps = NativeDivProps;
export type CodeBlockActionsProps = NativeDivProps;
export type CodeBlockFooterProps = NativeDivProps;
export type CodeBlockCopyButtonProps = ButtonProps & { value: string };
export type CodeBlockContentProps = HTMLAttributes<HTMLPreElement> & {
  /** Plain text to show. It renders as one text node, or as one line per row with `lineNumbers`. */
  code?: string;
  wrap?: boolean;
  lineNumbers?: boolean;
  startLine?: number;
};
export type CodeBlockLineProps = HTMLAttributes<HTMLSpanElement> & CodeBlockLineVariants;

// Adapted from shadcn-ui/ui d2fba50e; MIT: apps/docs/registry/THIRD_PARTY_NOTICES.md.
import type { GrammarState } from 'shiki/core';
import { escapeHtml, loadHighlighter, type Highlighter } from './highlighter.js';

type Done = { highlighter: Highlighter | null; text: string; lines: string[]; state?: GrammarState };

/**
 * Highlights `code` and returns one HTML string per line in `lines`, for `{@html}` in a `CodeBlockLine`. Pass
 * getters so the result follows the current values.
 */
export function useHighlightedCode(code: () => string, language: () => string) {
  let loaded = $state.raw<{ language: string; highlighter: Highlighter | null } | null>(null);

  $effect(() => {
    const current = language();
    let cancelled = false;
    loadHighlighter(current)
      .then((highlighter) => {
        if (!cancelled) loaded = { language: current, highlighter };
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  });

  // The complete lines, highlighted. While the code streams, only the new lines are tokenized, starting from the
  // grammar state of the last one. It is a cache, so it is not reactive.
  let done: Done = { highlighter: null, text: '', lines: [] };

  const lines = $derived.by(() => {
    const value = code();
    // A trailing newline would render as an extra empty line.
    const text = value.endsWith('\n') ? value.slice(0, -1) : value;
    const highlighter = loaded?.language === language() ? loaded.highlighter : null;
    if (!highlighter) return text.split('\n').map(escapeHtml);

    if (done.highlighter !== highlighter || !text.startsWith(done.text)) done = { highlighter, text: '', lines: [] };
    const end = text.lastIndexOf('\n') + 1;
    if (end > done.text.length) {
      const result = highlighter.highlight(text.slice(done.text.length, end - 1), done.state);
      done = { highlighter, text: text.slice(0, end), lines: [...done.lines, ...result.lines], state: result.state };
    }

    // The last line is still being written, so it is tokenized on every change.
    return [...done.lines, highlighter.highlight(text.slice(end), done.state).lines[0] ?? ''];
  });

  return {
    get lines() {
      return lines;
    },
  };
}

// Adapted from shadcn-ui/ui d2fba50e; MIT: apps/docs/registry/THIRD_PARTY_NOTICES.md.
import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
export const codeBlockVariants = cva('rounded-lg text-sm data-[size=sm]:text-xs has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 group/code-block relative flex w-full min-w-0 flex-col overflow-hidden', {
  variants: {
    variant: { default: 'border border-input text-foreground dark:bg-input/30 has-[>[data-slot=code-block-content]:focus-visible]:border-ring', destructive: 'border border-destructive/30 text-destructive dark:border-destructive/40' },
  },
  defaultVariants: { variant: 'default' },
});
export type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;
export const codeBlockLineVariants = cva(
  "-mx-3 px-3 in-data-numbered:gap-x-3 before:min-w-6 before:text-end before:text-muted-foreground after:start-1 after:text-muted-foreground group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
  {
    variants: {
      variant: {
        default: '', added: "bg-muted after:content-['+']",
        removed: "bg-destructive/10 after:text-destructive after:content-['−']", highlighted: 'bg-muted',
      },
    },
    defaultVariants: { variant: 'default' },
  },
);
export type CodeBlockLineVariants = VariantProps<typeof codeBlockLineVariants>;

export { default as CodeBlock } from './CodeBlock.svelte';
export { default as CodeBlockHeader } from './CodeBlockHeader.svelte';
export { default as CodeBlockTitle } from './CodeBlockTitle.svelte';
export { default as CodeBlockActions } from './CodeBlockActions.svelte';
export { default as CodeBlockCopyButton } from './CodeBlockCopyButton.svelte';
export { default as CodeBlockContent } from './CodeBlockContent.svelte';
export { default as CodeBlockLine } from './CodeBlockLine.svelte';
export { default as CodeBlockFooter } from './CodeBlockFooter.svelte';
export { codeBlockVariants, codeBlockLineVariants } from './variants.js';
export type { CodeBlockVariants, CodeBlockLineVariants } from './variants.js';
export { highlightCode, loadHighlighter } from './highlighter.js';
export { useHighlightedCode } from './use-highlighted-code.svelte.js';
export type {
  CodeBlockProps,
  CodeBlockHeaderProps,
  CodeBlockTitleProps,
  CodeBlockActionsProps,
  CodeBlockCopyButtonProps,
  CodeBlockContentProps,
  CodeBlockLineProps,
  CodeBlockFooterProps,
} from './types.js';