component

Code

A syntax-highlighted source block, with optional line numbers, line highlighting, clamping and copy-to-clipboard.

Code does no highlighting of its own. It takes already-tokenized lines — { text, color?, className?, fontStyle? } runs — and renders them. That is the entire contract with a highlighter, and it is deliberate: Shiki alone is a multi-megabyte dependency with its own theme format, and baking it in would make every consumer of the design system pay for it whether or not they render code. Bring any tokenizer you like, or none.

Highlighted

Pass lines from a highlighter. @pindoba/core-code/shiki is an optional adapter that converts Shiki output into this shape — it ships as a separate entry point with shiki as an optional peer dependency, so importing Code never pulls in a highlighting engine:

import { codeToTokens } from "shiki";
import { shikiToLines } from "@pindoba/core-code/shiki";

const lines = shikiToLines(
  await codeToTokens(source, { lang: "ts", theme: "github-dark" }),
);

Note the adapter converts Shiki’s output rather than importing Shiki, so it works with any Shiki version and runs happily on a server or in a worker. Pick a highlighter theme that matches your pindoba theme — Code never sees either, so it cannot reconcile them for you.

AstroReactSvelteVue

PreviewCode


        
        
        function greet(name) {
      
        
        
          return "Hello, " + name;
      
        
        
        }

function greet(name) {  return "Hello, " + name;}

function greet(name) {  return "Hello, " + name;}

function greet(name) {  return "Hello, " + name;}

Line Numbers and Highlighting

showLineNumbers adds a number beside each line, and startLine offsets the count so an excerpt can report its real position in the file rather than restarting at 1. highlightLines takes numbers in displayed terms, so it lines up with what the reader sees.

Numbers are per-line cells inside the code, not a separate gutter column: a real gutter has to stay scroll-locked to the code beside it and drifts the moment the block scrolls horizontally. They are also user-select: none, so a selection copies the code without dragging line numbers along.

AstroReactSvelteVue

PreviewCode


        41
        
        function greet(name) {
      
        42
        
          return "Hello, " + name;
      
        43
        
        }

41function greet(name) {42  return "Hello, " + name;43}

import { Code } from "../Code";
import { LINES } from "./_sample";

export default function LineNumbersDemo() {
  return (
    <Code
      lines={LINES}
      lang="ts"
      showLineNumbers
      startLine={41}
      highlightLines={[42]}
    />
  );
}

41function greet(name) {42  return "Hello, " + name;43}

<script lang="ts">
  import Code from "../code.svelte";
  import { LINES } from "./_sample.js";
</script>

<Code
  lines={LINES}
  lang="ts"
  showLineNumbers
  startLine={41}
  highlightLines={[42]}
/>

41function greet(name) {42  return "Hello, " + name;43}

<script setup lang="ts">
import { Code } from "@pindoba/vue-code";
import { LINES } from "./_sample";
</script>

<template>
  <Code
    :lines="LINES"
    lang="ts"
    showLineNumbers
    :startLine="41"
    :highlightLines="[42]"
  />
</template>

Clamping

maxLines clamps a long block and fades the overflow; collapsible adds an expand control. Clamping is purely visual — every line is still rendered, so in-page search still finds text inside a collapsed block. A maxLines larger than the content is a no-op rather than a fade painted over nothing.

AstroReactSvelteVue

PreviewCode

txt


        1
        
        line 1 of a longer file
      
        2
        
        line 2 of a longer file
      
        3
        
        line 3 of a longer file
      
        4
        
        line 4 of a longer file
      
        5
        
        line 5 of a longer file
      
        6
        
        line 6 of a longer file
      
        7
        
        line 7 of a longer file
      
        8
        
        line 8 of a longer file
      
        9
        
        line 9 of a longer file
      
        10
        
        line 10 of a longer file
      
        11
        
        line 11 of a longer file
      
        12
        
        line 12 of a longer file
      
        13
        
        line 13 of a longer file
      
        14
        
        line 14 of a longer file

---
import Code from "../Code.astro";

const LONG = Array.from({ length: 14 }, (_, i) => ({
  tokens: [{ text: `line ${i + 1} of a longer file` }],
}));
---

<Code lines={LONG} lang="txt" maxLines={5} collapsible showLineNumbers />

txt

1line 1 of a longer file2line 2 of a longer file3line 3 of a longer file4line 4 of a longer file5line 5 of a longer file6line 6 of a longer file7line 7 of a longer file8line 8 of a longer file9line 9 of a longer file10line 10 of a longer file11line 11 of a longer file12line 12 of a longer file13line 13 of a longer file14line 14 of a longer file

import { Code } from "../Code";

const LONG = Array.from({ length: 14 }, (_, i) => ({
  tokens: [{ text: `line ${i + 1} of a longer file` }],
}));

export default function ClampedDemo() {
  return (
    <Code lines={LONG} lang="txt" maxLines={5} collapsible showLineNumbers />
  );
}

txt

1line 1 of a longer file2line 2 of a longer file3line 3 of a longer file4line 4 of a longer file5line 5 of a longer file6line 6 of a longer file7line 7 of a longer file8line 8 of a longer file9line 9 of a longer file10line 10 of a longer file11line 11 of a longer file12line 12 of a longer file13line 13 of a longer file14line 14 of a longer file

<script lang="ts">
  import Code from "../code.svelte";

  const LONG = Array.from({ length: 14 }, (_, i) => ({
    tokens: [{ text: `line ${i + 1} of a longer file` }],
  }));
</script>

<Code lines={LONG} lang="txt" maxLines={5} collapsible showLineNumbers />

1line 1 of a longer file2line 2 of a longer file3line 3 of a longer file4line 4 of a longer file5line 5 of a longer file6line 6 of a longer file7line 7 of a longer file8line 8 of a longer file9line 9 of a longer file10line 10 of a longer file11line 11 of a longer file12line 12 of a longer file13line 13 of a longer file14line 14 of a longer file

<script setup lang="ts">
import { Code } from "@pindoba/vue-code";

const LONG = Array.from({ length: 14 }, (_, i) => ({
  tokens: [{ text: `line ${i + 1} of a longer file` }],
}));
</script>

<template>
  <Code :lines="LONG" lang="txt" :maxLines="5" collapsible showLineNumbers />
</template>

Without a Highlighter

Omit lines and the raw code is rendered as plain text, so a block degrades to something readable rather than to nothing. This is also the right choice when the source is not a supported language, or when the block is short enough that highlighting adds noise.

AstroReactSvelteVue

PreviewCode


        
        
        function greet(name) {
      
        
        
          return "Hello, " + name;
      
        
        
        }

function greet(name) {  return "Hello, " + name;}

Surface

The block’s root is a Panel root, so it takes every Panel surface prop — background, emphasis, feedback, padding, radius (plus the per-side variants), border, shadow, translucent and as. The defaults reproduce the familiar block: a surface.hill fill, a muted 1px border and an sm corner.

radius="inner" is the concentric corner — it resolves against the nearest Panel ancestor’s radius minus its padding, so a block dropped inside a Card curves with it instead of against it.

AstroReactSvelteVue

PreviewCode

The code surface is a Panel root. Inside a Card, radius="inner"replaces the default sm corner with the concentric one — the Card'sradius minus its content padding.


        
        
        function greet(name) {
      
        
        
          return "Hello, " + name;
      
        
        
        }

Default radius="sm".


        
        
        function greet(name) {
      
        
        
          return "Hello, " + name;
      
        
        
        }

radius="inner".

---
import Code from "../Code.astro";
import Card from "@pindoba/astro-card";
import { SOURCE } from "./_sample";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "lg", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The code surface is a Panel root. Inside a Card, <code>radius="inner"</code>
    replaces the default <code>sm</code> corner with the concentric one — the Card's
    <code>radius</code> minus its content padding.
  </p>
  <Card size="md" radius="2xl" border="default">
    <Code code={SOURCE} />
    <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
      Default <code>radius="sm"</code>.
    </p>
  </Card>
  <Card size="md" radius="2xl" border="default">
    <Code code={SOURCE} radius="inner" />
    <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
      <code>radius="inner"</code>.
    </p>
  </Card>
</div>

The code surface is a Panel root. Inside a Card, radius="inner" replaces the default sm corner with the concentric one — the Card's radius minus its content padding.

function greet(name) {  return "Hello, " + name;}

Default radius="sm".

function greet(name) {  return "Hello, " + name;}

radius="inner".

import { Code } from "../Code";
import { Card } from "@pindoba/react-card";
import { SOURCE } from "./_sample";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

export default function InnerRadiusDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", width: "full" })}>
      <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
        The code surface is a Panel root. Inside a Card,{" "}
        <code>radius="inner"</code> replaces the default <code>sm</code> corner
        with the concentric one — the Card's <code>radius</code> minus its
        content padding.
      </p>
      <Card size="md" radius="2xl" border="default">
        <Code code={SOURCE} />
        <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
          Default <code>radius="sm"</code>.
        </p>
      </Card>
      <Card size="md" radius="2xl" border="default">
        <Code code={SOURCE} radius="inner" />
        <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
          <code>radius="inner"</code>.
        </p>
      </Card>
    </div>
  );
}

The code surface is a Panel root. Inside a Card, radius="inner" replaces the default sm corner with the concentric one — the Card's radius minus its content padding.

function greet(name) {  return "Hello, " + name;}

Default radius="sm".

function greet(name) {  return "Hello, " + name;}

radius="inner".

<script lang="ts">
  import Code from "../code.svelte";
  import Card from "@pindoba/svelte-card";
  import { SOURCE } from "./_sample.js";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "lg", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The code surface is a Panel root. Inside a Card, <code>radius="inner"</code>
    replaces the default <code>sm</code> corner with the concentric one — the
    Card's
    <code>radius</code> minus its content padding.
  </p>
  <Card size="md" radius="2xl" border="default">
    <Code code={SOURCE} />
    <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
      Default <code>radius="sm"</code>.
    </p>
  </Card>
  <Card size="md" radius="2xl" border="default">
    <Code code={SOURCE} radius="inner" />
    <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
      <code>radius="inner"</code>.
    </p>
  </Card>
</div>

The code surface is a Panel root. Inside a Card, radius="inner" replaces the default sm corner with the concentric one — the Card's radius minus its content padding.

function greet(name) {  return "Hello, " + name;}

Default radius="sm".

function greet(name) {  return "Hello, " + name;}

radius="inner".

<script setup lang="ts">
import { Code } from "@pindoba/vue-code";
import { Card } from "@pindoba/vue-card";
import { SOURCE } from "./_sample";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column', width: 'full' })">
    <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
      The code surface is a Panel root. Inside a Card,
      <code>radius="inner"</code> replaces the default <code>sm</code> corner
      with the concentric one — the Card's <code>radius</code> minus its content
      padding.
    </p>
    <Card size="md" radius="2xl" border="default">
      <Code :code="SOURCE" />
      <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
        Default <code>radius="sm"</code>.
      </p>
    </Card>
    <Card size="md" radius="2xl" border="default">
      <Code :code="SOURCE" radius="inner" />
      <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
        <code>radius="inner"</code>.
      </p>
    </Card>
  </div>
</template>

Copying and Accessibility

copyable renders a copy button in the toolbar. It copies the original source verbatim — reconstructed from the tokens when only lines were given — so what lands on the clipboard is never the rendered markup. The button’s state lives in its accessible name (Copy code → Copied), not only in a data attribute, because a button whose name never changes gives no feedback to a screen reader.

The scrolling region is focusable and labelled, so a horizontally overflowing block can be read without a pointer.

#Highlighted

#Line Numbers and Highlighting

#Clamping

#Without a Highlighter

#Surface

#Copying and Accessibility

Highlighted

Line Numbers and Highlighting

Clamping

Without a Highlighter

Surface

Copying and Accessibility