CodeCollapsibleWrapper

Collapsible wrapper for long code blocks

CodeCollapsibleWrapper

A component that wraps long code blocks with expand/collapse functionality, preventing very long code from overwhelming the page.

Usage

Wrap a code block with ::code-collapsible-wrapper:

::code-collapsible-wrapper
\`\`\`ts
// This is a long code example that will be collapsible
export function createConfiguration(options: ConfigOptions): Config {
  const defaults = {
    theme: 'light',
    language: 'en',
    features: {
      darkMode: true,
      animations: true,
      accessibility: true,
    },
  }

  return {
    ...defaults,
    ...options,
    features: {
      ...defaults.features,
      ...options.features,
    },
  }
}

export function validateConfiguration(config: Config): boolean {
  if (!config.theme) {
    throw new Error('Theme is required')
  }
  if (!config.language) {
    throw new Error('Language is required')
  }
  return true
}

export function applyConfiguration(config: Config): void {
  validateConfiguration(config)
  // Apply theme
  document.documentElement.setAttribute('data-theme', config.theme)
  // Apply language
  document.documentElement.setAttribute('lang', config.language)
}
\`\`\`
::

Behavior

When collapsed:

  • Shows only the first portion of the code (approximately 16rem height)
  • Displays a gradient fade at the bottom
  • Shows an "Expand" button

When expanded:

  • Shows the full code block
  • Shows a "Collapse" button

Props

PropTypeDefaultDescription
classstring-Additional CSS classes

Slots

SlotDescription
defaultCode block content (typically a fenced code block)

Styling

The component includes:

  • Smooth expand/collapse animation
  • Gradient fade effect when collapsed
  • Button positioned in the overlay
  • Separator between trigger and content