Copy page

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.

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

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>Dev Portal 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()