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.

Syntax highlighting

DocsLit uses Shiki for build-time syntax highlighting. Code blocks are highlighted at parse time, so there is no client-side rendering cost. Shiki supports dual themes -- your code blocks automatically match the page's light or dark mode.

Code theme toggle

Every code block and code group includes a kebab menu that lets readers switch all code blocks between light and dark mode. This setting is independent of the page theme and is saved to the browser for future visits.

You can also force a specific theme on any individual code block:

<wc-code-block language="javascript" theme="dark"> const alwaysDark = true; </wc-code-block>

Fenced code block filename

You can add a filename directly in the fenced code block info string:

```javascript filename="config.js" export default { name: "My Docs" }; ```

This is equivalent to using the filename attribute on wc-code-block.

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 block with line numbers

Add the linenumbers attribute to show line numbers alongside the code:

<wc-code-block language="python" linenumbers="true"> def greet(name): print(f"Hello, {name}!") </wc-code-block> def greet(name): print(f"Hello, {name}!")

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> console.log("Hello from JS"); print("Hello from Python") fmt.Println("Hello from Go")

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 {{VAR_NAME}} 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 {{NAME}}. 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.

Copy button on code groups

Code groups include a copy button that copies the active tab's content. Readers can copy code from any tab without selecting text manually.

Supported languages

DocsLit uses Shiki for syntax highlighting, which supports 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.

Code blocks containing `` variable placeholders use plain text highlighting so that interactive variable substitution continues to work. Blocks without variables get full Shiki highlighting.