# Syntax Highlight

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

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](/dev-portal/zudoku/markdown/code-blocks).

:::tip

You can also use backticks to highlight code blocks in Markdown files, see
[Code Blocks](../markdown/code-blocks) for more information.

:::

## Import

```tsx
import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";
```

## Types

```ts
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.

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

## Result

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

## Supported Languages

Here are examples for all supported languages:

### TypeScript / JavaScript / TSX

```typescript title="User.ts"
interface User {
  name: string;
  age: number;
}

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

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

console.log(fibonacci(10));
```

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

### Markdown / MDX

```markdown title="hello.md"
# Hello World

This is **bold** and _italic_ text.

- Item 1
- Item 2

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

```mdx title="welcome.mdx"
import { Button } from "./Button";

# Welcome to MDX

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

### JSON / YAML / TOML

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

```yaml title="package.yml"
name: zudoku
version: 1.0.0
scripts:
  dev: vite
  build: vite build
```

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

[dependencies]
react = "^19.0.0"
```

### Shell / Bash / Terminal

```bash title="build.sh"
#!/bin/bash

# Install and build
npm install

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

```ansi title=ANSI
$ pnpm run build

> zudoku@1.0.0 build

[36mvite v7.0.5 [32mbuilding for production...[0m
[32m✓ 34 modules transformed.
[90mdist/[39m[32mindex.html                 [0m[90m0.46 kB[0m [33m│ gzip:  0.30 kB[0m
[90mdist/[39m[36massets/index-4sK2hL.css   [0m[90m24.67 kB[0m [33m│ gzip:  4.72 kB[0m
[90mdist/[39m[35massets/index-B1tPwS.js   [0m[90m143.18 kB[0m [33m│ gzip: 46.13 kB[0m
[34m✓ built in 1.23s
```

### GraphQL

```graphql title="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

```python title="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#

```csharp title="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

```rust title="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

```ruby title="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

```php title="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

<!-- prettier-ignore -->
```html title="index.html"
<!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

```css title="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

```java title="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

```go title="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

```kotlin title="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

```objc title="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

```swift title="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

```xml title="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>
```

### C

```c title="hello.c"
#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++

```cpp title="user.cpp"
#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

```zig title="main.zig"
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

```scala title="User.scala"
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

```dart title="user.dart"
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

```elixir title="user.ex"
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

```ocaml title="user.ml"
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

```lisp title="user.lisp"
(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

```powershell title="user.ps1"
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()
```
