Components DemoCode Examples
Components Demo

Code Examples

Showcase code with syntax highlighting, multiple language support, and interactive features using Documentation.AI's code components for ACME Company APIs.

Present code beautifully with syntax highlighting, copy functionality, and multi-language support. Documentation.AI's code components make technical content more accessible and actionable.

Basic Code Blocks

Simple code block

Use fenced code blocks with language identifiers for automatic syntax highlighting:

function greetUser(name) {
  return `Hello, ${name}! Welcome to our platform.`;
}

const message = greetUser("Developer");
console.log(message);
```javascript
function greetUser(name) {
  return `Hello, ${name}! Welcome to our platform.`;
}

const message = greetUser("Developer");
console.log(message);
```

Supported languages

Documentation.AI supports syntax highlighting for 50+ programming languages:

Popular languages:

# Python example
def calculate_total(items):
    return sum(item.price * item.quantity for item in items)

total = calculate_total(shopping_cart)
print(f"Total: ${total:.2f}")
// Go example
package main

import "fmt"

func main() {
    message := "Hello, Documentation.AI!"
    fmt.Println(message)
}
// Rust example  
fn main() {
    let message = "Hello from Rust!";
    println!("{}", message);
}
-- SQL example
SELECT users.name, COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id  
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5;

Configuration languages:

# YAML configuration
version: '3.8'
services:
  web:
    build: .
    ports:
      - "8000:8000"
    environment:
      - DEBUG=1
      - DATABASE_URL=postgres://localhost/myapp
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "test": "jest",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "express": "^4.18.0",
    "lodash": "^4.17.21"
  }
}
# Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 8000
CMD ["npm", "start"]

Shell commands and terminal output

# Install dependencies
npm install

# Start development server  
npm run dev

# Build for production
npm run build

# Deploy to production
npm run deploy
# Output example with comments
$ curl -X GET "https://api.acme.com/users/123" \
  -H "Authorization: Bearer YOUR_API_TOKEN"

# Response:
{
  "id": 123,
  "name": "John Doe", 
  "email": "john@acme.com"
}

Advanced Code Features

Line highlighting

Highlight specific lines to draw attention to important code:

function processPayment(amount, cardToken) {
  // Validate payment amount
  if (amount <= 0) {
    throw new Error('Invalid payment amount');
  }
  // Process the payment
  const payment = await paymentGateway.charge({
    amount: amount,
    source: cardToken
  });
  
  return payment;
}
```javascript
function processPayment(amount, cardToken) {
  // Validate payment amount
  if (amount <= 0) {
    throw new Error('Invalid payment amount');
  }
  // Process the payment
  const payment = await paymentGateway.charge({
    amount: amount,
    source: cardToken
  });
  
  return payment;
}
```

Line focus

Use focus to blur non-essential lines and emphasize specific code sections:

def authenticate_user(email, password):
    user = User.find_by_email(email)
    
    if user and user.verify_password(password):
        token = generate_jwt_token(user.id)
        return {"token": token, "user": user.to_dict()}
    
    raise AuthenticationError("Invalid credentials")

Line numbers

Add line numbers for easier reference in documentation:

interface User {
  id: string;
  email: string;
  name: string;
  createdAt: Date;
}

class UserService {
  async createUser(userData: Partial<User>): Promise<User> {
    const user = new User({
      id: generateId(),
      ...userData,
      createdAt: new Date()
    });
    
    return await this.repository.save(user);
  }
}

CodeGroup - Multiple Languages

Basic CodeGroup

Present the same functionality in multiple programming languages:

// JavaScript with fetch
const response = await fetch('https://api.acme.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + apiToken
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@acme.com'
  })
});

const user = await response.json();
console.log('Created user:', user);

Auto-detected language tabs

CodeGroup automatically uses language identifiers as tab names when no custom tabs are specified:

// TypeScript - type-safe API client
interface CreateUserRequest {
  name: string;
  email: string;
}

interface User extends CreateUserRequest {
  id: string;
  createdAt: string;
}

const createUser = async (userData: CreateUserRequest): Promise<User> => {
  const response = await apiClient.post<User>('/users', userData);
  return response.data;
};

Complex workflow examples

Show complete workflows with multiple steps:

// Initial setup and configuration
import { ApiClient } from '@yourcompany/api-client';

const client = new ApiClient({
  baseURL: 'https://api.acme.com',
  timeout: 10000,
  retries: 3,
  apiVersion: 'v2'
});

// Configure default headers
client.setDefaultHeaders({
  'User-Agent': 'MyApp/1.0',
  'Accept': 'application/json'
});

Code Documentation Patterns

Inline code and variables

Use backticks for inline code, variables, and technical terms:

When calling the createUser() function, pass a userData object containing the required name and email fields. The function returns a Promise<User> that resolves to the created user object.

The API_BASE_URL environment variable should be set to https://api.acme.com for production or http://localhost:3000 for development.

Code comments and explanations

Add helpful comments within code blocks:

// Initialize the payment processor with your API credentials
const processor = new PaymentProcessor({
  apiKey: process.env.STRIPE_API_KEY,    // Your Stripe API key
  webhook: process.env.STRIPE_WEBHOOK,   // Webhook endpoint secret
  currency: 'usd'                        // Default currency
});

async function processSubscription(customerId, planId) {
  try {
    // Create the subscription with a 7-day trial
    const subscription = await processor.createSubscription({
      customer: customerId,
      items: [{ price: planId }],
      trial_period_days: 7,
      metadata: {
        source: 'documentation_example'  // Track signup source
      }
    });

    // Send confirmation email to customer
    await emailService.send({
      to: subscription.customer.email,
      template: 'subscription_confirmed',
      data: { subscription }
    });

    return subscription;
  } catch (error) {
    // Log error for debugging but don't expose sensitive details
    console.error('Subscription creation failed:', error);
    throw new Error('Unable to process subscription');
  }
}

Before and after examples

Show code improvements and migrations:

// Old approach - callback hell and error prone
function getUserData(userId, callback) {
  getUser(userId, function(err, user) {
    if (err) {
      callback(err);
      return;
    }
    
    getProfile(user.profileId, function(err, profile) {
      if (err) {
        callback(err);
        return;
      }
      
      getPreferences(user.id, function(err, preferences) {
        if (err) {
          callback(err);
          return;
        }
        
        callback(null, {
          user: user,
          profile: profile,
          preferences: preferences
        });
      });
    });
  });
}

Interactive Code Features

Copy functionality

All code blocks automatically include a copy button in the top-right corner. Users can click to copy the entire code block to their clipboard.

Tip: Test your code examples before publishing. Copy the code from your own documentation and make sure it works as expected.

Code block titles

Add descriptive titles to code blocks for better context:

const express = require('express');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.get('/health', (req, res) => {
  res.json({ status: 'healthy', timestamp: new Date().toISOString() });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Highlighting with explanations

Combine line highlighting with detailed explanations:

# Configuration and imports
import os
from datetime import datetime, timedelta
from typing import Optional

class TokenManager:
    def __init__(self, secret_key: str):
        # Store the secret key securely
        self.secret_key = secret_key
        self.algorithm = 'HS256'
        
    def generate_token(self, user_id: str, expires_hours: int = 24) -> str:
        payload = {
            'user_id': user_id,
            # Set expiration time
            'exp': datetime.utcnow() + timedelta(hours=expires_hours),
            'iat': datetime.utcnow()
        }
        
        return jwt.encode(payload, self.secret_key, algorithm=self.algorithm)

Highlighted sections explanation:

  • Lines 1-3: Import necessary dependencies for JWT token management
  • Lines 8-10: Initialize the token manager with security configuration
  • Line 15: Calculate token expiration based on current time plus specified hours

Best Practices

Code organization

Do's:

  • ✅ Include relevant imports and dependencies
  • ✅ Add helpful comments for complex logic
  • ✅ Show both success and error scenarios
  • ✅ Use realistic variable names and values
  • ✅ Keep examples focused and concise

Don'ts:

  • ❌ Include production API keys or secrets
  • ❌ Use overly complex examples for basic concepts
  • ❌ Show deprecated or outdated syntax
  • ❌ Skip error handling in examples
  • ❌ Use confusing variable names like foo and bar

Language-specific considerations

JavaScript/TypeScript:

  • Use modern ES6+ syntax
  • Include type annotations for TypeScript
  • Show both Promise and async/await patterns

Python:

  • Follow PEP 8 style guidelines
  • Include type hints where helpful
  • Use descriptive variable names

Go:

  • Include proper error handling
  • Show package declarations
  • Use idiomatic Go patterns

What's next?

Continue exploring component features: