@code Blocks

Display syntax-highlighted code with line numbers and highlighting for 50+ programming languages.

Quick Example

@code {
  language: "typescript";
  caption: "Express Server";
  lineNumbers: true;
  highlight: [3, 4, 5];
  code: "import express from 'express';
    const app = express();
    
    app.get('/', (req, res) => {
      res.send('Hello World');
    });
    
    app.listen(3000);";
}

Properties

language (required)

Programming language for syntax highlighting (e.g., typescript, python, java)

code (required)

The code content to display

caption (optional)

Optional caption or description for the code block

lineNumbers (optional, default: false)

Show line numbers alongside code

highlight (optional)

Array of line numbers to highlight (e.g., [3, 4, 5])

Supported Languages (50+)

javascript

typescript

python

java

cpp

csharp

rust

php

ruby

swift

kotlin

scala

matlab

sql

bash

powershell

html

css

scss

json

yaml

markdown

xml

graphql

dockerfile

Full list: Prism.js Supported Languages

Examples

TypeScript

@code {
  language: "typescript";
  caption: "Type-safe function";
  lineNumbers: true;
  code: "interface User {
    id: number;
    name: string;
  }
  
  function greet(user: User): string {
    return `Hello, ${user.name}!`;
  }";
}

Python

@code {
  language: "python";
  caption: "FastAPI endpoint";
  lineNumbers: true;
  highlight: [5, 6];
  code: "from fastapi import FastAPI
  
  app = FastAPI()
  
  @app.get('/users/{user_id}')
  async def get_user(user_id: int):
      return {'id': user_id}";
}

Bash Script

@code {
  language: "bash";
  caption: "Deployment script";
  code: "#!/bin/bash
  npm run build
  npm test
  npm run deploy";
}

SQL

@code {
  language: "sql";
  caption: "Database query";
  lineNumbers: true;
  code: "SELECT u.name, COUNT(o.id) as orders
  FROM users u
  LEFT JOIN orders o ON u.id = o.user_id
  WHERE u.active = true
  GROUP BY u.name
  HAVING COUNT(o.id) > 5;";
}

Line Highlighting

Draw attention to specific lines by adding them to the highlight array:

@code {
  language: "javascript";
  caption: "Important lines highlighted";
  lineNumbers: true;
  highlight: [3, 4, 5];  // Lines 3, 4, 5 will be highlighted
  code: "function processData(data) {
    const validated = validate(data);
    
    // These lines are highlighted
    if (!validated) {
      throw new Error('Invalid data');
    }
    
    return transform(validated);
  }";
}

Note: Line highlighting helps readers focus on important parts of the code. Use it for error handling, key logic, or changes in code reviews.

How Code Renders

PDF

Syntax highlighted using Prism.js with line numbers and highlighting preserved.

DOCX

Displayed with monospace font and proper indentation. Captions shown above code.

PPTX

Formatted as code slides with monospace font and dark background.

Best Practices

✅ Use Captions

Add captions to provide context: "Example usage", "Error handling", "Configuration", etc.

✅ Enable Line Numbers for Longer Code

Line numbers make it easier to reference specific parts of the code in discussions.

✅ Keep Code Concise

Show only relevant code. Use ellipsis (...) to indicate omitted sections if needed.

✅ Highlight Key Lines

Use highlighting sparingly to draw attention to the most important lines.

⚠️ Escape Special Characters

Use proper escaping for quotes and backslashes in code strings.

Try It Yourself

Test @code blocks in the interactive playground:

Open Playground →

← Previous: @diagram Blocks Back to v1.0 Release Notes →