Developer Content

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>
}

Syntax Highlighting

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

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

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:

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:

1
npm i -g xyd-js

you can also manage line numbers globally:

{
  "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:

{
  "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

you can also use custom icon:

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

Output:

npm i -g xyd-js

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"

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.

{
  ...
  "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)
$$

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>