Code blocks display syntax-highlighted code with support for 100+ languages and advanced features like line highlighting.

Basic Code Block

Use triple backticks with a language identifier:

function greet(name) {

  console.log(`Hello, ${name}!`);

}



greet("World");

```javascript

function greet(name) {

  console.log(`Hello, ${name}!`);

}

```

Supported Languages

The compiler supports 100+ programming languages via the lumis syntax highlighter:

Popular Languages

// Rust

fn main() {

    println!("Hello, Rust!");

}

// TypeScript

interface User {

  id: string;

  name: string;

}



const user: User = {

  id: "123",

  name: "Alice"

};

# Python

def fibonacci(n):

    if n <= 1:

        return n

    return fibonacci(n-1) + fibonacci(n-2)



print(fibonacci(10))

// Go

package main



import "fmt"



func main() {

    fmt.Println("Hello, Go!")

}

// Java

public class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello, Java!");

    }

}

// C#

using System;



class Program {

    static void Main() {

        Console.WriteLine("Hello, C#!");

    }

}

Web Languages

<!-- HTML -->

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <h1>Hello, HTML!</h1>

  </body>

</html>

/* CSS */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

}



.heading {

  font-size: 2rem;

  color: #1199fb;

}

// SCSS

$primary-color: #1199fb;



.button {

  background: $primary-color;

  

  &:hover {

    background: darken($primary-color, 10%);

  }

}

Config & Data Languages

{

  "name": "My App",

  "version": "1.0.0",

  "dependencies": {

    "react": "^18.0.0"

  }

}

name: My App

version: 1.0.0

dependencies:

  react: ^18.0.0

  typescript: ^5.0.0

[package]

name = "my-app"

version = "1.0.0"



[dependencies]

serde = "1.0"

<?xml version="1.0" encoding="UTF-8"?>

<project>

  <name>My App</name>

  <version>1.0.0</version>

</project>

Shell & Scripts

#!/bin/bash



# Install dependencies

npm install



# Run tests

npm test



# Build for production

npm run build

# PowerShell

$files = Get-ChildItem -Path "C:\Projects" -Recurse

foreach ($file in $files) {

    Write-Host $file.Name

}

-- SQL

SELECT users.name, orders.total

FROM users

INNER JOIN orders ON users.id = orders.user_id

WHERE orders.status = 'completed'

ORDER BY orders.created_at DESC;

Line Highlighting

Highlight specific lines using the highlight meta attribute:

Single Line

function greet(name) {

  console.log(`Hello, ${name}!`); // This line is highlighted

}

```javascript highlight={2}

function greet(name) {

  console.log(`Hello, ${name}!`); // This line is highlighted

}

```

Line Range

fn main() {

    let numbers = vec![1, 2, 3, 4, 5];

    

    for num in numbers {

        println!("{}", num);

    }

}

```rust highlight={3-5}

fn main() {

    let numbers = vec![1, 2, 3, 4, 5];

    

    for num in numbers {

        println!("{}", num);

    }

}

```

Multiple Lines

import math



def calculate_area(radius):

    return math.pi * radius ** 2



radius = 5

area = calculate_area(radius)

print(f"Area: {area}")

```python highlight={1,4,7}

import math



def calculate_area(radius):

    return math.pi * radius ** 2



radius = 5

area = calculate_area(radius)

print(f"Area: {area}")

```

Mixed Ranges and Lines

interface Config {

  apiUrl: string;

  timeout: number;

}



const config: Config = {

  apiUrl: "https://api.example.com",

  timeout: 5000

};



export default config;

```typescript highlight={1-2,5,8-10}

interface Config {

  apiUrl: string;

  timeout: number;

}



const config: Config = {

  apiUrl: "https://api.example.com",

  timeout: 5000

};



export default config;

```

Long Code Examples

For longer code, the syntax highlighting remains fast and clean:

use std::collections::HashMap;



#[derive(Debug, Clone)]

pub struct DocumentationConfig {

    pub name: String,

    pub version: String,

    pub theme: Theme,

    pub colors: Colors,

    pub navigation: Navigation,

}



#[derive(Debug, Clone)]

pub struct Theme {

    pub primary: String,

    pub background: BackgroundColors,

}



#[derive(Debug, Clone)]

pub struct BackgroundColors {

    pub light: String,

    pub dark: String,

}



impl DocumentationConfig {

    pub fn load(path: &str) -> anyhow::Result<Self> {

        let content = std::fs::read_to_string(path)?;

        let config: DocumentationConfig = serde_json::from_str(&content)?;

        Ok(config)

    }

    

    pub fn validate(&self) -> anyhow::Result<()> {

        if self.name.is_empty() {

            anyhow::bail!("Config name cannot be empty");

        }

        Ok(())

    }

}



fn main() -> anyhow::Result<()> {

    let config = DocumentationConfig::load("docs.json")?;

    config.validate()?;

    

    println!("Loaded config: {:?}", config);

    Ok(())

}

Best Practices

Always specify the language

Always include the language identifier for proper syntax highlighting. This improves readability and helps screen readers.

Use line highlighting sparingly

Highlight only the most important lines. Too much highlighting reduces its effectiveness.

Keep code examples focused

Show only the relevant code. Use comments to indicate where additional code would go:

// ... previous code



function importantFunction() {

  // This is the key part

}



// ... rest of implementation

Include context when needed

If code requires context (imports, setup), include just enough to make it runnable or understandable.

Use syntax highlighting for readability

Even short snippets benefit from syntax highlighting. Use it for inline code that's longer than a few words:

npm install

Instead of: npm install (inline)

Common Patterns

CLI Commands

# Install the package

npm i -g relevate



# Start dev server

relevate preview --port 3000



# Run accessibility checks

relevate a11y

Configuration Examples

{

  "name": "My Documentation",

  "theme": "sky",

  "colors": {

    "primary": "#1199fb"

  },

  "navigation": {

    "tabs": [

      {

        "id": "docs",

        "label": "Documentation",

        "content": ["index", "guide"]

      }

    ]

  }

}

API Examples

// Fetch user data

const response = await fetch('https://api.example.com/users/123', {

  headers: {

    'Authorization': `Bearer ${token}`,

    'Content-Type': 'application/json'

  }

});



const user = await response.json();

console.log(user);

Error Handling

use anyhow::{Context, Result};



fn read_config(path: &str) -> Result<Config> {

    let content = std::fs::read_to_string(path)

        .context("Failed to read config file")?;

    

    let config: Config = serde_json::from_str(&content)

        .context("Failed to parse config JSON")?;

    

    Ok(config)

}

Use code blocks with highlighting to draw attention to error handling, edge cases, or important patterns in your examples.

Full Image