Developer Content

Writing Content

Developer Content

Learn how to write content for developers

In this guide, you'll learn how to write content for developers, like code snippets, examples, and more.

Code Blocks

You can use standard markdown code blocks (```) to write code blocks. Syntax highlighting is automatically applied based on the language of the code.

Input:

```tsx
const MyComponent = () => {
  return <div>Hello, world!</div>
}
```

Output:

const MyComponent = () => {
  return <div>Hello, world!</div>
}

You can also customize syntax highlighting. Please see theme settings for more details.

Syntax Highlighting

Default syntax highlighting depends on used theme but you can override it via docs.json:

{
  "theme": {
    "coder": {
      "syntaxHighlight": "<name> or <theme_object>"
    }
  }
}

Tip

Check out syntax highlighting example.

You can use the Theme Editor to customize any of the built-in themes or any theme from the VS Code marketplace.

Line Highlighting

Input:

```tsx{2}
const MyComponent = () => {
  return <div>Hello, world!</div>
}
```

Output:

const MyComponent = () => {
  return <div>Hello, world!</div>
}

You can also specify multiple single lines or ranges:

Multiple single lines: {1,3,5}
Line ranges: {2-4}, {6-8}, {11-13}
Line ranges + single lines: {1,6-8,11}
All together: {1,3-5}

Input:

```tsx{1,3-5}
const MyComponent = () => {
  return <div>
    <>
        Hello, world!
    </>
  </div>
}
```

Output:

const MyComponent = () => {
  return <div>
    <>
        Hello, world!
    </>
  </div>
}

Code Diff

Input:

```tsx
const MyComponent = () => {
  // !diff -
  return <div>Hello, world!</div>
  // !diff +
  return <div>Hello, new world!</div>
}
```

Output:


const MyComponent = () => {
-
  return <div>Hello, world!</div>
+
  return <div>Hello, new world!</div>
}

Code Groups

You can use the code-group component to group multiple code blocks together.

Input:

:::code-group{title="xyd installation"}
```bash bun
bun add -g xyd-js
```

```bash npm
npm i -g xyd-js
```
:::

Output:

xyd installation

bun add -g xyd-js

Code Attributes

Code attributes allow you to customize the behavior and appearance of code blocks. Attributes are specified within square brackets [] after the language identifier and before the code content.

Syntax:

```language [attribute1 attribute2]
your code here
```

Line Numbers

You can add line numbers to code blocks by adding the lines attribute after the language identifier.

Input:

```bash [lines]
npm i -g xyd-js
```

Output:

1npm i -g xyd-js

you can also manage line numbers globally:

docs.json

{
  "theme": {
    "coder": {
      "lines": true | false
    }
  }
}

Disable Scroll

To make a code snippet display in full height without scrolling, you can use the !scroll attribute:

Input:

```bash [!scroll]
# your long code snippet but want to show in full height
```

Output:

# your long code snippet but want to show in full height

you can also manage scroll globally:

docs.json

{
  "theme": {
    "coder": {
      "scroll": false | true
    }
  }
}

Code Description

Input:

```bash [descHead="Tip" desc="Install CLI to **run** and **build** your docs."]
npm i -g xyd-js
```

Output:

npm i -g xyd-js

Tip

Install CLI to run and build your docs.

Currently desc supports a basic markdown syntax like **, * or ~~ but DOES NOT support more advanced writing features.

you can also use custom icon:

```bash [descIcon="folder-code"]
npm i -g xyd-js
```

Output:

npm i -g xyd-js

Tip

Install CLI to run and build your docs.

Import Code

You can import code from a file using the @importCode function:

@importCode "./relative-to-current-file.tsx"

Include

You can use @include function to include another content files in current content:

@include "./relative-to-current-file.md"

Tip

You can include .mdx files too, check out React Components guide.

Diagrams

MermaidBeta

Visualize complex concepts and workflows using Mermaid diagrams directly in your Markdown. Mermaid supports multiple diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, and Gantt charts.

Before you start writing a diagrams make sure you enabled diagrams integration:

docs.json

{
  ...
  "integrations": {
    "diagrams": true
  }
}

Simply wrap your diagram syntax in a mermaid code block:

```mermaid
graph TD;
    A[Start] --> B{Decision?};
    B -->|Yes| C[Process A];
    B -->|No| D[Process B];
    C --> E[End];
    D --> E;
```

Latex

Supports LaTeX for math equations. To use LaTeX, wrap your inline math equations in $. For example, $(a^2 + b^2 = c^2)$ will render $a^2 + b^2 = c^2$ .

For display math equations, wrap the equation in $$:

$$
\frac{d}{dx}\left(\int_0^x f(t) \, dt\right) = f(x)
$$

\frac{d}{dx}\left(\int_0^x f(t) \, dt\right) = f(x)

Changelog

You can also render changelog page using the @changelog function:

@changelog "~/CHANGELOG.md"

currently supported changelog format:

## [VERSION] - <LABEL>
### <HEADING>
<CONTENT>

### <HEADING>
<CONTENT>

---

## [VERSION] - <LABEL>
### <HEADING>
<CONTENT>

### <HEADING>
<CONTENT>

Tip

Check out more advanced example.

Edit page

Writing Quickstart SEO