DocsPress

on WordPress

Guide

Code Tabs

Use docspress/code-tabs for equivalent examples readers can switch between, such as package managers, programming languages, operating systems, or API clients.

When to use it

Choose Code Tabs only when every tab accomplishes the same task. Use Colorful Code when examples build on one another or need highlights, diffs, or annotations. Separate sequential examples with headings instead of hiding steps in tabs.

Edit the block

Add, remove, and reorder tabs in Gutenberg. Give each tab a short unique label, select its language, and optionally set a filename. Keep the same conceptual scope and expected result across tabs.

Attributes

Reference

Code Tabs attributes

Alternatives and presentation accepted by docspress/code-tabs.
3 fields
tabs array required

Up to eight equivalent source examples.

DefaultTwo starter tabs Values1–8 items
showLineNumbers boolean

Shows one-based line numbers in every panel.

Defaulttrue Valuestrue, false
caption string

Optional formatted caption for the complete tab set.

Each tabs item accepts:

Reference

Tab object

Fields for one equivalent source example.
4 fields
label string required

Short, unique tab label.

language enum

Syntax language. Invalid values normalize to plaintext.

Defaultplaintext Valuesbash, css, html, javascript, json, jsx, markdown, php, plaintext, python, shell, sql, tsx, typescript, yaml
filename string

Optional display filename.

code string required

Plain source text.

Invalid languages fall back to plaintext. Only the first eight valid tabs render. An empty tab array renders no block.

Creative examples

Package-manager alternatives

Terminal 
npm install docspress
Equivalent package-manager commands.

Fetch one documentation Page

Terminal 
curl https://example.test/wp-json/wp/v2/pages/42
The same read-only request in three clients, using a non-production hostname.

Express one configuration in three formats

docspress.json 
{  "docsDir": "docs",  "status": "draft"}
Equivalent configuration values in formats used by different toolchains.

Published behavior and accessibility

The block uses a semantic tab list and tab panels. Readers can move between tabs with the keyboard, and only the active panel participates in the normal tab order. Copy operates on the active example and announces its result.

Put the most broadly useful choice first. Keep tab labels compact, avoid more than four choices when possible, and confirm that every example remains functionally equivalent after updates.