Code Blocks

Jamdesk uses Shiki for beautiful syntax highlighting with support for 100+ languages.

Basic Syntax Highlighting

const greeting = "Hello, Jamdesk!";
console.log(greeting);

Adding a Filename

Show the file path with the title attribute:

export const config = {
  name: "My Docs",
  theme: "jam"
};

Line Highlighting

Draw attention to specific lines with {1,3-5} syntax:

// This line is highlighted
const config = {
  apiKey: process.env.API_KEY,
  baseUrl: 'https://api.example.com', // highlighted
  timeout: 5000,                       // highlighted
  retries: 3,                          // highlighted
};

Inline Notation

Use inline comments to highlight, focus, or show diffs without cluttering your code fence.

Highlight with Notation

Add // [!code highlight] to highlight specific lines:

function processPayment(amount: number) {
  validateAmount(amount);
  const result = chargeCard(amount); // [!code highlight]
  return result;
}

Focus Lines

Dim all lines except focused ones with // [!code focus]:

function createUser(data: UserInput) {
  const validated = validate(data);
  const user = await db.users.create(validated); // [!code focus]
  await sendWelcomeEmail(user.email); // [!code focus]
  return user;
}

Diff Notation

Show added and removed lines with // [!code ++] and // [!code --]:

function greet(name: string) {
  console.log("Hello, World!"); // [!code --]
  console.log(`Hello, ${name}!`); // [!code ++]
}

Line Numbers

Add line numbers with showLineNumbers:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

Custom Start Line

Start numbering from a specific line:

func processRequest(ctx context.Context) error {
    // This is line 42
    return nil
}

Combined Features

Use multiple features together:

import axios from 'axios';

const client = axios.create({
  baseURL: process.env.API_URL,
  timeout: 10000,
});

export default client;

Code Groups

Show the same code in multiple languages:

curl -X POST https://api.example.com/posts \
  -H "Authorization: Bearer $API_KEY"

Available Themes

Configure syntax highlighting themes in docs.json:

{
  "styling": {
    "codeblocks": {
      "theme": {
        "light": "github-light",
        "dark": "github-dark"
      }
    }
  }
}

CSS Variables Theme

For complete control over syntax highlighting colors, use the CSS Variables theme:

{
  "styling": {
    "codeblocks": {
      "theme": "css-variables"
    }
  }
}

Then customize colors in your custom.css:

:root {
  --jd-token-keyword: #ff7b72;
  --jd-token-string: #a5d6ff;
  --jd-token-comment: #8b949e;
  --jd-token-function: #d2a8ff;
  --jd-token-constant: #79c0ff;
  --jd-token-parameter: #ffa657;
}