Code Collapse

CodeCollapse is a component that allows you to collapse code blocks in your documentation. It is useful when you want to show a code snippet but don't want to overwhelm the reader with too much code.

To use it, you need to wrap your fenced code block with CodeCollapse component.

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
MDC
::code-collapse{height="100px"}
  ```js
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
  ```
::

Props

PropsTypeDefaultDescription
heightString220pxHeight of the collapsed code block.
openBooleanfalseWhether the CodeCollapse is open or not.

Slots

SlotDescription
defaultA slot where fenced code block will be rendered.

Design Tokens

tokens.config.ts
import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    codeCollapse: {
      margin: '{prose.code.block.margin}',
      borderRadius: '{elements.radii.base}', 
      borderWidth: '{prose.code.block.borderWidth}', 
      borderStyle: '{prose.code.block.borderStyle}', 
      borderColor: '{prose.code.block.borderColor}',
      button: {
        bottom: '{space.2}', 
        left: '50%', 
        transform: 'translateX(-50%)',
        paddingY: '{space.1}',
        paddingX: '{space.3}',
        borderRadius: '{elements.radii.base}',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: '{elements.border.secondary.static}',
        backgroundColor: {
          initial: '{color.gray.50}',
          dark: '{color.black}'
        },
        fontSize: '{text.sm.fontSize}', 
        lineHeight: '{text.sm.lineHeight}',
        color: '{elements.text.secondary.color.static}',
      },
      gradientBackdrop: {
        height: '50px',
        background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, {prose.code.block.backgroundColor} 100%)',
      }
    },
  }
})
Edit this page on GitHub
Table of Contents