Code blocks

Components•5 min read||

DocsLit provides enhanced code blocks with syntax highlighting, filenames, copy buttons, tabbed groups, and editable variables.

Basic code block

Use standard fenced code blocks with a language identifier:

```javascript const config = { name: "My Docs" }; ```

const config = { name: "My Docs" };

Every code block includes a copy button automatically.

Code block with filename

Add a filename attribute to show a file header:

<wc-code-block language="json" filename="docslit.json"> { "name": "My Docs", "sidebar": [] } </wc-code-block>

{ "name": "My Docs", "sidebar": [] }

The syntax highlighting language. Examples: javascript, python, bash, json, html, css.

A filename displayed in the header bar above the code.

Code groups

Group related code examples in tabs using wc-code-group and wc-code-tab:

<wc-code-group> <wc-code-tab label="JavaScript"> \```javascript console.log("Hello from JS"); \``` </wc-code-tab> <wc-code-tab label="Python"> \```python print("Hello from Python") \``` </wc-code-tab> <wc-code-tab label="Go"> \```go fmt.Println("Hello from Go") \``` </wc-code-tab> </wc-code-group>

CODEBLOCK_8_END

CODEBLOCK_9_END

CODEBLOCK_10_END

Editable variables

Use wc-var to create interactive variables that update across all code blocks on the page. Readers click the variable, type their value, and every placeholder updates instantly.

Set your API key:

Set your base URL:

curl -H "Authorization: Bearer {{API_KEY}}" {{BASE_URL}}/v1/docs

const client = new DocsClient({ apiKey: "{{API_KEY}}", baseUrl: "{{BASE_URL}}" });

Click the variable values above and type your own — watch both code blocks update in real time.

The variable name. Use UPPER_SNAKE_CASE by convention. Reference it in code blocks with .

The default value shown before the reader edits it.

Editable variables make setup instructions personal. Instead of asking readers to "replace YOUR_API_KEY", give them a field to type it once and see it everywhere.

Supported languages

DocsLit supports syntax highlighting for all common programming languages including JavaScript, TypeScript, Python, Go, Rust, Java, C, C++, Ruby, PHP, Shell/Bash, SQL, HTML, CSS, JSON, YAML, TOML, Markdown, and more.

Familiar names

These Mintlify-style tag names work directly:

MDX-style	Resolves to
`<CodeGroup>`	`<wc-code-group>`