Code and data

This topic helps you create technical samples and structured information: code blocks, tabbed alternatives, tables, and drop-down sections.

For headings, procedures, and callouts, see Basic text elements.
For images and figures, see Graphics.

Choosing a pattern

Reader need	Structure
Show a command, snippet, or file	Code sample (fenced block)
Same task, different tools or platforms	Tabs
Simple comparison or field list	Markdown pipe table
Caption, or list / notice inside a cell	HTML table
Optional or secondary detail	drop-down section

Using HTML tables

Pipe tables are enough for inline text, links, and code spans.
Switch to HTML when you need a semantic caption, or block content (list, admonition, image) inside a cell.

Adding code samples

Use a fenced code block with a language tag for commands, configuration, or source snippets.

Basic sample

npm install
npm start

Sample with a file title

Add a title when the file path helps the reader:

src/components/greet.js

export function greet(name) {
  return `Hello, ${name}!`;
}

Sample with highlighted lines

Highlight lines when you want the eye on a change:

function add(a, b) {
  const sum = a + b;
  return sum;
}

Adding tabs

Use tabs when the reader chooses one path (package manager, OS, language). Keep each tab self-contained for that path.

Keep the import statements

The import Tabs and import TabItem statements are necessary for this component to work.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs groupId="package-manager">
  <TabItem value="npm" label="npm" default>

```bash
npm install @docusaurus/core
```

  </TabItem>
  <TabItem value="yarn" label="Yarn">

```bash
yarn add @docusaurus/core
```

  </TabItem>
</Tabs>

Example:

npm

npm

npm install @docusaurus/core

Yarn

Yarn

yarn add @docusaurus/core

pnpm

pnpm

pnpm add @docusaurus/core

groupId keeps matching tab sets on the same page in sync.

Building tables

Simple pipe tables

Use a pipe table for small reference grids. Keep cells inline (text, links, code).

Example:

Field	Required	Notes
title	Yes	Browser tab and metadata
description	Yes	Search / link preview summary

Richer tables (caption or block cells)

Pipe tables have no caption field and cannot hold lists or admonitions in a cell. Use HTML when you need either:

Table 1. Admonition types in the classic theme

Type	Fence
Note	:::note
Tip	:::tip
Warning	:::warning

Inside <td>, prefer the Admonition component over ::: fences (fences are unreliable in table cells):

Table 2. Block content inside HTML table cells

List	Notice	Image
First checklist item Second checklist item	Nested notice Prefer the Admonition component inside HTML tables.

Adding drop-down sections

Use expandables for optional or secondary material — long reference lists, alternate paths, or “show more” detail.

This template supports two expandables. They behave the same for the reader (click to open/close). The difference is styling and how you author them.

Which drop-down to use

Element	Use case	Trade-off
@theme/Details (Infima)	Default setting for this template. You want the drop-down to match the Docusaurus / Infima theme (padding, chevron, colours).	Requires an import at the top of the .mdx file
HTML <details> / <summary>	You want a plain drop-down with no import, or content that should look like native browser disclosure.	Browser-default look (not Infima-themed)

Theme Details (Infima styling)

@theme/Details is the Infima-styled disclosure used across Docusaurus sites. Import it once in the topic, then use the component:

import Details from '@theme/Details';

<Details summary="Optional — theme Details">

Same idea, with the classic Docusaurus disclosure look.

</Details>

Optional – theme Details

Same idea, with the classic Docusaurus disclosure look.

HTML details (no import)

Works in any .mdx file — no theme import:

<details>
  <summary>Optional — full CLI reference</summary>

  Extra flags and examples the advanced reader may need.

</details>

Details

Optional – full CLI reference

Extra flags and examples the advanced reader may need.

Related topics

• Basic text elements
• Graphics
• Creating topics