Collapsible Code

2 min readStableIntermediate

A long config file can push everything else off the screen. Two metastring options fix that: expandable renders the block clipped, with a fade and a "Show more" button across the bottom, and maxLines=N sets how much stays visible until someone presses it.

Quick Start

expandable on its own clips the block to a fixed 15em height, roughly nine lines.

JSON

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

content/features/code/collapsible-code.mdx

MDX

```json expandable
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

Adding Options

maxLines=3 sets the collapsed height to three lines of code, so the reader sees the shape of the file and nothing more.

JSON

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

content/features/code/collapsible-code.mdx

MDX

```json expandable maxLines=3
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true
  }
}
```

Advanced

Collapsing composes with the rest of the metastring. This block names the file, highlights the two lines the reader came for, marks every experimental, and keeps six lines visible until the button is pressed.

deploy/values.yaml

YAML

replicaCount: 2
image:
  repository: ghcr.io/owndocs/site
  tag: 2.4.1
  pullPolicy: IfNotPresent
resources:
  limits:
    cpu: 500m
    memory: 512Mi
features:
  experimental: false
  search: true

content/features/code/collapsible-code.mdx

MDX

```yaml expandable maxLines=6 {3-4} title="deploy/values.yaml" /experimental/
replicaCount: 2
image:
  repository: ghcr.io/owndocs/site
  tag: 2.4.1
  pullPolicy: IfNotPresent
resources:
  limits:
    cpu: 500m
    memory: 512Mi
features:
  experimental: false
  search: true
```

Options

expandablebooleanDefault: false

Renders the block clipped, with a gradient fade and a "Show more" button along the bottom edge. Without it the block always renders in full.

maxLines=NnumberDefault: 15em height

How tall the collapsed block is, measured in lines. The clipped height works out to N times 1.65em, so maxLines=6 leaves about six lines of code on screen. Leave it out and the block clips at a flat 15em instead.

How clipping behaves

Without expandable, maxLines does nothing. The block is never clipped, so the height cap has nothing to apply to.
Expanding is one-way. Once a reader presses "Show more" the block stays open for the rest of the visit; there is no "Show less" counterpart.
Clipping is a height limit, not a content filter. The hidden lines stay in the page, so the copy button hands over the whole block and in-page search still finds text below the fold.
Write N as digits. maxLines=6 works; maxLines=six is ignored, and the block falls back to the 15em default.
Highlighted or diff-marked lines below the cut keep their marking. It only becomes visible once the block is expanded.

Code Blocks

Line Highlighting

Was this page helpful?

Collapsible Code

Quick Start

Adding Options

Advanced

Options

How clipping behaves

Related pages

Code Blocks

Line Highlighting