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;
  noBackground?: 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

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

Supported Languages

Here are examples for all supported languages:

TypeScript / JavaScript / TSX

User.ts
 
interface User {
  name: string;
  age: number;
}

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

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

console.log(fibonacci(10));

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

Markdown / MDX

hello.md
 
# Hello World

This is **bold** and _italic_ text.

- Item 1
- Item 2

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

welcome.mdx
 
import { Button } from "./Button";

# Welcome to MDX

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

JSON / YAML / TOML

package.json
 
{
  "name": "zudoku",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

package.yml
 
name: zudoku
version: 1.0.0
scripts:
  dev: vite
  build: vite build

package.toml
 
[package]
name = "zudoku"
version = "1.0.0"

[dependencies]
react = "^19.0.0"

Shell / Bash / Terminal

build.sh
 
#!/bin/bash

# Install and build
npm install

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

ANSI
 
$ 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

schema.graphql
 
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

data_processor.py
 
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#

user_service.cs
 
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

main.rs
 
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

todo_list.rb
 
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

user.php
 
<?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

index.html
 
<!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

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

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

Java

user_service.java
 
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

main.go
 
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

user.kt
 
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

user.m
 
#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

user.swift
 
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

app.xml
 
<?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>