Skip to main content
OwnDocs

Collapsible Code

1 min readStableIntermediate

Long code blocks can overwhelm a page. The expandable metastring collapses the block to a configurable number of visible lines with an expand button.

Quick Start

Collapse a block with expandable.

JSON
JSON
{
  "compilerOptions": {
    "strict": true,
    "noEmit": true
  }
}

Adding Options

Cap the visible lines with maxLines=N.

JSON
JSON
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true
  }
}

Advanced

Combine expandable, maxLines, and a file title to collapse a large config file.

tsconfig.json
JSON
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["next-env.d.ts", "**/*.ts"]
}

Options

expandablebooleanDefault: false

Collapses the block with an expand button.

maxLines=Nnumber

Number of lines visible before expansion. When omitted, the block collapses to a fixed 15em height.

Related pages

Code Blocks

Was this page helpful?