Example Docs

Code Blocks

Display beautifully highlighted code in your documentation.

Basic Code Block

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Supported Languages

Code blocks support 100+ programming languages including:

Line Highlighting

Highlight specific lines to draw attention:

```tsx {3-5}
function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}
```

File Names

Add a filename to your code block:

```tsx title="app/page.tsx"
export default function Page() {
  return <h1>Hello</h1>;
}
```

Code Groups

Group related code blocks into tabs with the Mintlify-style <CodeGroup> syntax. The tab label can come from a bare filename after the language, title, or filename. CodeGroup is built in, so you do not need to import it or register it in docs.config.ts.

npm install better-auth
pnpm add better-auth
import { betterAuth } from "better-auth";

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true,
  },
});

The authoring syntax is just regular fenced code inside the group:

<CodeGroup dropdown>

```bash npm
npm install better-auth
```

```bash pnpm
pnpm add better-auth
```

```ts title="auth.ts"
import { betterAuth } from "better-auth";

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true,
  },
});
```

</CodeGroup>

Agent Metadata

Code fences can include extra metadata for agents and MCP tools. The rendered code block keeps the same visual treatment; the metadata is only parsed from the raw markdown and MCP source.

```ts title="docs.config.ts" framework="nextjs" packageManager="pnpm" runnable
import { defineDocs } from "@farming-labs/docs";

export default defineDocs({
  entry: "docs",
});
```

Agents reading /docs/<slug>.md see the metadata directly on the code fence. MCP clients can call get_code_examples to receive the same example as structured JSON:

{
  "language": "ts",
  "title": "docs.config.ts",
  "framework": "nextjs",
  "packageManager": "pnpm",
  "runnable": true
}

Use runnable only when the snippet is complete enough to copy into the named file or terminal.

Line Numbers

Enable line numbers for longer code blocks:

```tsx showLineNumbers
const a = 1;
const b = 2;
const c = a + b;
console.log(c);
```