Documentation

Syntax Highlight

Add syntax highlighting to your code blocks with customizable styling and features. The component offers extensive customization options including line numbers, copy buttons, language indicators, and custom theming to match your brand. For simpler use cases, you can also use standard Markdown code blocks as described in Code Blocks.

You can also use backticks to highlight code blocks in Markdown files, see Code Blocks for more information.

Import


Code
import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";

Types


Code
type SyntaxHighlightProps = {
  language?: string;
  code?: string;
  wrapLines?: boolean;
  title?: string;
  showCopy?: "hover" | "always" | "never";
  showCopyText?: boolean;
  children?: string;
  showLanguageIndicator?: boolean;
  className?: string;
  showLineNumbers?: boolean;
};

Usage

You can either use children or code prop to pass the code to the component.


Code
<SyntaxHighlight language="typescript">
  {`for (let i = 0; i < Infinity; i++) {
  console.log(i);
}`}
</SyntaxHighlight>

Result

Code

for (let i = 0; i < Infinity; i++) {
  console.log(i);
}

Supported Languages

Here are examples for all supported languages:

TypeScript / JavaScript / TSX


Code
interface User {
  name: string;
  age: number;
}

const greet = (user: User): string => `Hello, ${user.name}!`;


Code
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));


Code
export const App = () => {
  return <div>Hello, World!</div>;
};

Markdown / MDX


Code
# Hello World

This is **bold** and _italic_ text.

- Item 1
- Item 2

[Link to Zudoku](https://zudoku.dev)

Code
import { Button } from "./Button";

# Welcome to MDX

<Button onClick={() => alert("Hello!")}>Click me</Button>

JSON / YAML / TOML


Code
{
  "name": "zudoku",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}


Code
name: zudoku
version: 1.0.0
scripts:
  dev: vite
  build: vite build

Code
[package]
name = "zudoku"
version = "1.0.0"

[dependencies]
react = "^19.0.0"

Shell / Bash / Terminal

Code
#!/bin/bash

# Install and build
npm install

if [ "$NODE_ENV" = "production" ]; then
  npm run build
else
  npm run dev
fi

Code
$ pnpm run build

> zudoku@1.0.0 build

vite v7.0.5 building for production...
✓ 34 modules transformed.
dist/index.html                 0.46 kB │ gzip:  0.30 kB
dist/assets/index-4sK2hL.css   24.67 kB │ gzip:  4.72 kB
dist/assets/index-B1tPwS.js   143.18 kB │ gzip: 46.13 kB
✓ built in 1.23s

GraphQL


Code
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
  users: [User!]!
}

type Mutation {
  createUser(name: String!, email: String!): User!
}

Python


Code
import asyncio
from typing import List, Optional

class DataProcessor:
    def __init__(self, name: str):
        self.name = name

    async def process_items(self, items: List[str]) -> dict:
        results = [await self._process(item) for item in items]
        return {"processed": len(results), "items": results}

C#


Code
using System;
using System.Linq;

public class UserService {
    private readonly List<User> _users = new();

    public async Task<User?> GetUserAsync(int id) {
        await Task.Delay(100);
        return _users.FirstOrDefault(u => u.Id == id);
    }
}

Rust


Code
use std::collections::HashMap;

fn main() {
    let mut scores = HashMap::new();
    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Red"), 50);

    println!("Team scores: {:?}", scores);
}

Ruby


Code
class TodoList
  attr_reader :name, :items

  def initialize(name)
    @name = name
    @items = []
  end

  def add_item(description)
    @items << { description: description, completed: false }
  end
end

PHP


Code
<?php
class User {
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly string $email
    ) {}

    public function getDisplayName(): string {
        return ucfirst($this->name);
    }
}

HTML

Code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Zudoku Example</title>
  </head>
  <body>
    <h1>Welcome to Zudoku</h1>
    <p>Build beautiful documentation sites with ease.</p>
    <p>
      Nunc nec ornare libero. Sed ultricies lorem vitae enim vestibulum, at posuere augue ullamcorper.
    </p>
  </body>
</html>

CSS


Code
.button {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

Java


Code
import java.util.List;
import java.util.stream.Collectors;

public class UserService {
    private List<User> users;

    public List<User> getActiveUsers() {
        return users.stream()
            .filter(User::isActive)
            .collect(Collectors.toList());
    }
}

Go


Code
package main

import "fmt"

type User struct {
    ID    int
    Name  string
    Email string
}

func main() {
    user := User{ID: 1, Name: "Alice", Email: "alice@example.com"}
    fmt.Printf("User: %+v\n", user)
}

Kotlin


Code
data class User(val id: Long, val name: String, val email: String)

class UserRepository {
    private val users = mutableListOf<User>()

    fun addUser(user: User) {
        users.add(user)
    }

    fun findById(id: Long): User? = users.find { it.id == id }
}

Objective-C


Code
#import <Foundation/Foundation.h>

@interface User : NSObject
@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSString *email;
@property (nonatomic, assign) NSInteger userId;

- (instancetype)initWithName:(NSString *)name
                       email:(NSString *)email
                      userId:(NSInteger)userId;
@end

Swift


Code
import Foundation

struct User: Codable {
    let id: UUID
    let name: String
    let email: String

    init(name: String, email: String) {
        self.id = UUID()
        self.name = name
        self.email = email
    }
}

XML

Code
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appSettings>
    <add key="ApplicationName" value="Zudoku" />
    <add key="Version" value="1.0.0" />
  </appSettings>
  <modules>
    <module name="Auth" enabled="true" />
    <module name="Logging" enabled="true" />
  </modules>
</configuration>

C


Code
#include <stdio.h>
#include <stdlib.h>

typedef struct {
    int id;
    char name[50];
} User;

int main() {
    User user = {1, "Alice"};
    printf("User: %s (ID: %d)\n", user.name, user.id);
    return 0;
}

C++


Code
#include <iostream>
#include <string>
#include <vector>

class User {
private:
    int id;
    std::string name;

public:
    User(int id, std::string name) : id(id), name(name) {}

    void display() const {
        std::cout << "User: " << name << " (ID: " << id << ")" << std::endl;
    }
};

int main() {
    User user(1, "Alice");
    user.display();
    return 0;
}

Zig


Code
const std = @import("std");

const User = struct {
    id: u32,
    name: []const u8,

    pub fn display(self: User) void {
        std.debug.print("User: {s} (ID: {})\n", .{ self.name, self.id });
    }
};

pub fn main() !void {
    const user = User{ .id = 1, .name = "Alice" };
    user.display();
}

Scala


Code
case class User(id: Int, name: String, email: String)

object UserRepository {
  private var users = List[User]()

  def addUser(user: User): Unit = {
    users = user :: users
  }

  def findById(id: Int): Option[User] = {
    users.find(_.id == id)
  }
}

Dart


Code
class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  Map<String, dynamic> toJson() => {
    'id': id,
    'name': name,
    'email': email,
  };
}

Elixir

Code
defmodule User do
  defstruct [:id, :name, :email]

  def new(id, name, email) do
    %User{id: id, name: name, email: email}
  end

  def display(%User{name: name, id: id}) do
    IO.puts("User: #{name} (ID: #{id})")
  end
end

# Usage
user = User.new(1, "Alice", "alice@example.com")
User.display(user)

OCaml


Code
type user = {
  id : int;
  name : string;
  email : string;
}

let create_user id name email =
  { id; name; email }

let display_user user =
  Printf.printf "User: %s (ID: %d)\n" user.name user.id

let () =
  let user = create_user 1 "Alice" "alice@example.com" in
  display_user user

Common Lisp


Code
(defstruct user
  id
  name
  email)

(defun create-user (id name email)
  (make-user :id id :name name :email email))

(defun display-user (user)
  (format t "User: ~A (ID: ~A)~%"
          (user-name user)
          (user-id user)))

;; Usage
(let ((user (create-user 1 "Alice" "alice@example.com")))
  (display-user user))

PowerShell


Code
class User {
    [int]$Id
    [string]$Name
    [string]$Email

    User([int]$id, [string]$name, [string]$email) {
        $this.Id = $id
        $this.Name = $name
        $this.Email = $email
    }

    [void]Display() {
        Write-Host "User: $($this.Name) (ID: $($this.Id))"
    }
}

# Usage
$user = [User]::new(1, "Alice", "alice@example.com")
$user.Display()

Edit this page

Last modified on November 17, 2025

Stepper Button