Code Blocks

Display code with syntax highlighting, line numbers, and annotations.

Basic

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

Titles

Add a filename header with auto-detected language icons:

export default function App() {
  return <h1>Hello World</h1>
}

def calculate(a, b):
    return a + b

npm install docyard

Line Numbers

Display line numbers for reference:

export default {
  title: "My Docs",
  description: "Documentation site",
  theme: "default"
}

Start from a specific line number:

function handleSubmit(event) {
  event.preventDefault();
  saveData(formData);
}

Line Highlighting

Draw attention to specific lines:

function example() {
  const highlighted = true;
  const normal = false;
  return highlighted;
}

Highlight ranges:

const first = 1;
const second = 2;
const third = 3;
const fourth = 4;
const fifth = 5;

Diff Markers

Show code changes with additions and deletions:

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

Focus

Dim surrounding code to highlight what matters:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); 

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Error & Warning

Mark lines with errors or warnings:

const config = {
  title: "My Docs",
  descrption: "Typo here" 
}

const config = {
  legacyMode: true 
}

Combined Features

Mix and match any features:

export function calculate(a: number, b: number) {
  const sum = a + b;
  const product = a * b; 
  const diff = a - b; 
  return { sum, product, diff };
}

Code Imports

Import code directly from files in your docs directory:

<<< @/examples/config.js

Import a named region:

<<< @/examples/app.js#setup

Define regions in your source files:

// #region setup
const app = createApp();
app.use(router);
// #endregion setup

Import with line highlighting:

<<< @/examples/config.js {2-4}

Syntax

Basic fence:

```language
code here
```

With title:

```js [filename.js]
code here
```

With line numbers:

```js:line-numbers
code here
```

With highlights:

```js {1,3-5}
code here
```

Inline markers:

```js
const old = true; // [!code --]
const new = true; // [!code ++]
const focused = true; // [!code focus]
const broken = true; // [!code error]
const deprecated = true; // [!code warning]
```

Full syntax:

```language [title]:line-numbers {highlights}

Reference

Supported comment styles: //, #, /* */, --, <!-- -->, ;