Building Marketing Code Displays

Code Display Taxonomy

1. Static Code Snippet

Single code block with language label and copy button. Already implemented as CodeSnippet.svelte.

Use for: Standalone code examples, install commands.

2. Code-Then-Output Split (Primary -- IA Section 3)

Side-by-side or stacked panels: config on left, CLI output on right.

Use for: Mechanism section showing bundle YAML + musher bundle apply output, pipeline YAML + musher pipeline run output.

3. Tabbed Multi-File View

Multiple files shown via tab switching -- only one visible at a time.

Use for: When showing related files (e.g., bundle.yaml + pipeline.yaml in a tabbed interface).

4. Interactive Terminal

Animated terminal with typewriter effect and state transitions. Already implemented as InteractiveTerminal.svelte.

Use for: Hero section demo.

Code-Then-Output Split Panel

This is the primary pattern needed for IA Section 3.

Layout Structure

<div class="grid gap-4 lg:grid-cols-2">
  <!-- Left panel: Configuration file -->
  <div class="code-panel">
    <div class="code-chrome">
      <span class="filename">bundle.yaml</span>
      <CopyButton code={bundleYaml} />
    </div>
    <pre class="code-body"><code>{@html highlightYaml(bundleYaml)}</code></pre>
  </div>

  <!-- Right panel: CLI output -->
  <div class="code-panel">
    <div class="code-chrome terminal">
      <div class="terminal-dots">
        <span class="dot-red"></span>
        <span class="dot-yellow"></span>
        <span class="dot-green"></span>
      </div>
      <span class="filename">output</span>
    </div>
    <pre class="code-body"><code>{@html highlightCliOutput(cliOutput)}</code></pre>
  </div>
</div>

Responsive Behavior

• Desktop (lg+): grid-cols-2 -- side by side
• Mobile (<lg): stacked vertically, config on top, output below
• Both panels have equal visual weight -- same height via min-h or grid stretching

Chrome Pattern

The code panel chrome matches existing CodeSnippet.svelte and InteractiveTerminal.svelte:

<!-- Config file chrome -->
<div class="bg-surface-04/50 border-border-subtle flex items-center justify-between border-b px-4 py-2">
  <span class="text-label text-text-tertiary font-mono">{filename}</span>
  <CopyButton {code} />
</div>

<!-- Terminal output chrome -->
<div class="bg-surface-04/50 border-border-subtle flex items-center gap-2 border-b px-4 py-2">
  <div class="flex items-center gap-1.5">
    <div class="bg-signal-error h-2.5 w-2.5 rounded-full"></div>
    <div class="bg-signal-warning h-2.5 w-2.5 rounded-full"></div>
    <div class="bg-signal-success h-2.5 w-2.5 rounded-full"></div>
  </div>
  <span class="text-label text-text-tertiary font-mono ml-2">output</span>
</div>

Panel Styling

<!-- Outer panel wrapper -->
<div class="bg-surface-02 border-border-subtle shadow-panel overflow-hidden rounded-lg border">
  <!-- Chrome header (above) -->
  <!-- Code body -->
  <pre class="overflow-x-auto p-4 leading-relaxed"><code class="text-data font-mono">{@html highlighted}</code></pre>
</div>

CSS-Only Syntax Highlighting

Use design token colors for syntax highlighting. No external dependencies (no Shiki, no Prism, no highlight.js).

Color Mapping

Highlighting Functions

Implement highlighting as pure functions that return HTML strings with <span> tags:

function highlightYaml(code: string): string {
  return code
    .split('\n')
    .map((line) => {
      // Comments
      if (line.trimStart().startsWith('#')) {
        return `<span style="color: var(--color-text-tertiary)">${escapeHtml(line)}</span>`;
      }

      // Key: value pairs
      const keyMatch = line.match(/^(\s*)([\w-]+)(:)(.*)/);
      if (keyMatch) {
        const [, indent, key, colon, value] = keyMatch;
        const highlightedValue = highlightYamlValue(value.trim());
        return `${indent}<span style="color: var(--color-signal-action)">${escapeHtml(key)}</span><span style="color: var(--color-text-secondary)">${colon}</span> ${highlightedValue}`;
      }

      // List items
      const listMatch = line.match(/^(\s*)(- )(.*)/);
      if (listMatch) {
        const [, indent, dash, value] = listMatch;
        return `${indent}<span style="color: var(--color-text-secondary)">${dash}</span>${highlightYamlValue(value)}`;
      }

      return escapeHtml(line);
    })
    .join('\n');
}

function highlightYamlValue(value: string): string {
  if (!value) return '';

  // Quoted strings
  if (/^["'].*["']$/.test(value)) {
    return `<span style="color: var(--color-signal-success)">${escapeHtml(value)}</span>`;
  }

  // Booleans and numbers
  if (/^(true|false|\d+(\.\d+)?)$/.test(value)) {
    return `<span style="color: var(--color-signal-warning)">${escapeHtml(value)}</span>`;
  }

  // Plain values
  return `<span style="color: var(--color-text-primary)">${escapeHtml(value)}</span>`;
}

function highlightCliOutput(output: string): string {
  return output
    .split('\n')
    .map((line) => {
      // Command prompt lines
      if (line.startsWith('$ ')) {
        const cmd = line.slice(2);
        return `<span style="color: var(--color-signal-action)">$</span> <span style="color: var(--color-text-primary)">${escapeHtml(cmd)}</span>`;
      }

      // Status lines with success indicators
      if (/\b(Done|complete|completed|OK)\b/i.test(line)) {
        return `<span style="color: var(--color-signal-success)">${escapeHtml(line)}</span>`;
      }

      // Indented output
      if (line.startsWith('  ')) {
        // Highlight timing values
        const withTiming = escapeHtml(line).replace(
          /(\d+\.?\d*s)/g,
          '<span style="color: var(--color-signal-warning)">$1</span>'
        );
        return `<span style="color: var(--color-text-secondary)">${withTiming}</span>`;
      }

      return `<span style="color: var(--color-text-secondary)">${escapeHtml(line)}</span>`;
    })
    .join('\n');
}

function escapeHtml(text: string): string {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

Important: Always escape HTML before inserting into {@html} to prevent XSS. The escapeHtml function must run before any <span> wrapping.

Using {@html} Safely

The highlighting functions produce trusted HTML from hardcoded IA content. This is safe because:

1. The input is static wireframe copy, not user input
2. All values are escaped via escapeHtml() before span-wrapping
3. The {@html} directive is used only for the pre-formatted code content

Tabbed Multi-File View

For showing multiple related files with tab switching:

<script lang="ts">
  interface Tab {
    label: string;
    filename: string;
    code: string;
    language: string;
  }

  interface Props {
    tabs: Tab[];
  }

  let { tabs }: Props = $props();
  let activeIndex = $state(0);
</script>

<div class="bg-surface-02 border-border-subtle shadow-panel overflow-hidden rounded-lg border">
  <!-- Tab bar -->
  <div class="bg-surface-04/50 border-border-subtle flex border-b">
    {#each tabs as tab, i}
      <button
        type="button"
        onclick={() => activeIndex = i}
        class="text-label px-4 py-2 font-mono transition-colors duration-fast
          {i === activeIndex
            ? 'text-text-primary border-b-2 border-signal-action bg-surface-02'
            : 'text-text-tertiary hover:text-text-secondary'}"
      >
        {tab.filename}
      </button>
    {/each}
  </div>

  <!-- Active panel -->
  <pre class="overflow-x-auto p-4 leading-relaxed"><code class="text-data font-mono">{@html highlight(tabs[activeIndex])}</code></pre>
</div>

IA Section 3 Content

The wireframe copy specifies exact YAML and CLI content. Here are the content slots to implement:

Bundle Code Block

Left panel (bundle.yaml):