Skip to main content

Collapsible Code

2 min readStableIntermediate

A long config file can push everything else off the screen. Add expandable to the fence and the block renders clipped, with a fade and a "Show more" button across the bottom. maxLines=N decides how much of it the reader sees first.

Quick Start

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

JSON
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"]
}
app/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
JSON
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true
  }
}
app/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
app/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.

Behavior worth knowing

  • maxLines does nothing on its own. Without expandable 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.
  • The hidden lines are still in the page. Clipping is a height limit, not a content filter, so the copy button hands over the whole block and in-page search still finds text below the fold.
  • N must be 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 stay marked; the reader just has to expand the block to see them.

Related pages

Code Blocks

Line Highlighting

Was this page helpful?