Logo
NeoArc Studio

Code Block

Display syntax-highlighted code in 50+ programming languages. Include filenames and copy-to-clipboard functionality for developer documentation.

Code blocks display syntax-highlighted code in your documentation. Support for 50+ languages, optional filenames, and copy-to-clipboard makes them ideal for API examples, configuration snippets, and implementation guidance.

When to Use

Block Properties

PropertyRequiredDescription
LanguageYesProgramming language for syntax highlighting
CodeYesThe code content to display
FilenameNoOptional filename displayed as a header above the code

Example: TypeScript Service

A TypeScript code example with filename.

export class PaymentService {
  constructor(
    private readonly stripe: Stripe,
    private readonly eventBus: EventBus
  ) {}

  async processPayment(request: PaymentRequest): Promise<PaymentResult> {
    // Tokenise card details with Stripe
    const token = await this.stripe.tokens.create({
      card: request.cardDetails
    });

    // Create the charge
    const charge = await this.stripe.charges.create({
      amount: request.amount,
      currency: request.currency,
      source: token.id,
      metadata: { orderId: request.orderId }
    });

    // Publish event for downstream processing
    await this.eventBus.publish('payment.completed', {
      orderId: request.orderId,
      chargeId: charge.id,
      amount: charge.amount
    });

    return { success: true, chargeId: charge.id };
  }
}

Example: YAML Configuration

Kubernetes deployment configuration.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: payment-service
  labels:
    app: payment-service
spec:
  replicas: 3
  selector:
    matchLabels:
      app: payment-service
  template:
    metadata:
      labels:
        app: payment-service
    spec:
      containers:
      - name: payment-service
        image: payment-service:v1.2.3
        ports:
        - containerPort: 8080
        resources:
          requests:
            memory: "256Mi"
            cpu: "250m"
          limits:
            memory: "512Mi"
            cpu: "500m"
        env:
        - name: STRIPE_API_KEY
          valueFrom:
            secretKeyRef:
              name: stripe-credentials
              key: api-key

Example: JSON API Response

API response format documentation.

{
  "data": {
    "id": "pay_1234567890",
    "type": "payment",
    "attributes": {
      "amount": 9999,
      "currency": "GBP",
      "status": "completed",
      "createdAt": "2026-01-24T10:30:00Z"
    },
    "relationships": {
      "order": {
        "data": { "type": "order", "id": "ord_abc123" }
      }
    }
  },
  "meta": {
    "requestId": "req_xyz789"
  }
}

Example: SQL Query

Database query for architecture documentation.

-- Find high-value customers with recent orders
SELECT 
    c.id,
    c.email,
    COUNT(o.id) as order_count,
    SUM(o.total_amount) as lifetime_value
FROM customers c
JOIN orders o ON o.customer_id = c.id
WHERE o.created_at > NOW() - INTERVAL '90 days'
GROUP BY c.id, c.email
HAVING SUM(o.total_amount) > 10000
ORDER BY lifetime_value DESC
LIMIT 100;

Example: Shell Commands

CLI instructions for deployment or setup.

# Deploy to production
kubectl apply -f deployment.yaml

# Verify deployment status
kubectl rollout status deployment/payment-service

# Check pod logs
kubectl logs -l app=payment-service --tail=100

# Port forward for local testing
kubectl port-forward svc/payment-service 8080:80

Supported Languages

CategoryLanguages
General PurposeTypeScript, JavaScript, Python, Java, C#, Go, Rust, Ruby, PHP
Markup & DataHTML, CSS, SCSS, JSON, YAML, XML, Markdown
Query LanguagesSQL, GraphQL
Shell & DevOpsBash, PowerShell, Dockerfile
InfrastructureTerraform, HCL, Kubernetes manifests