This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Miscellaneous Tests

Various test pages for math, chemical reactions, syntax highlighting, and more.

This section contains miscellaneous test pages, such as math and chemical reactions rendering as well as syntax highlighting.

1 - Chemical Reactions Test

Test page for chemical reactions using mhchem syntax

This page demonstrates various chemical reactions and formulas using mhchem syntax.

Basic Chemical Formulas

Simple Molecules

  • Water: \(\ce{H2O}\)
  • Carbon dioxide: \(\ce{CO2}\)
  • Methane: \(\ce{CH4}\)
  • Ammonia: \(\ce{NH3}\)

Complex Molecules

  • Glucose: \(\ce{C6H12O6}\)
  • Ethanol: \(\ce{C2H5OH}\)
  • Acetic acid: \(\ce{CH3COOH}\)
  • Benzene: \(\ce{C6H6}\)

Chemical Reactions

Simple Reactions

Combustion of methane:

$$\ce{CH4 + 2O2 -> CO2 + 2H2O}$$

Formation of water:

$$\ce{2H2 + O2 -> 2H2O}$$

Photosynthesis:

$$\ce{6CO2 + 6H2O + light -> C6H12O6 + 6O2}$$

Equilibrium Reactions

Ammonia synthesis:

$$\ce{N2 + 3H2 <=> 2NH3}$$

Water dissociation:

$$\ce{H2O <=> H+ + OH-}$$

Acid-Base Reactions

Hydrochloric acid with sodium hydroxide:

$$\ce{HCl + NaOH -> NaCl + H2O}$$

Acetic acid dissociation:

$$\ce{CH3COOH <=> CH3COO- + H+}$$

Oxidation-Reduction Reactions

Redox Reactions

Iron rusting:

$$\ce{4Fe + 3O2 -> 2Fe2O3}$$

Zinc with copper sulfate:

$$\ce{Zn + CuSO4 -> ZnSO4 + Cu}$$

Hydrogen peroxide decomposition:

$$\ce{2H2O2 -> 2H2O + O2}$$

Complex Reactions

Organic Chemistry

Esterification:

$$\ce{CH3COOH + CH3CH2OH <=> CH3COOCH2CH3 + H2O}$$

Alkene hydration:

$$\ce{CH2=CH2 + H2O -> CH3CH2OH}$$

Biochemical Reactions

Cellular respiration:

$$\ce{C6H12O6 + 6O2 -> 6CO2 + 6H2O + energy}$$

Protein synthesis:

$$\ce{amino acids -> protein + H2O}$$

Ionic Equations

Precipitation Reactions

Silver chloride formation:

$$\ce{Ag+ + Cl- -> AgCl v}$$

Barium sulfate formation:

$$\ce{Ba^{2+} + SO4^{2-} -> BaSO4 v}$$

Complex Ions

Ammonia complex:

$$\ce{Cu^{2+} + 4NH3 -> [Cu(NH3)4]^{2+}}$$

Gas Laws and States

Phase Changes

Water vaporization:

$$\ce{H2O(l) -> H2O(g)}$$

Carbon dioxide sublimation:

$$\ce{CO2(s) -> CO2(g)}$$

Gas Reactions

Ideal gas law demonstration:

$$\ce{PV = nRT}$$

Catalytic Reactions

Enzyme Catalysis

Enzyme-substrate complex:

$$\ce{E + S <=> ES -> E + P}$$

Industrial Catalysis

Haber process:

$$\ce{N2 + 3H2 ->[Fe catalyst] 2NH3}$$

Nuclear Reactions

Radioactive Decay

Alpha decay:

$$\ce{^{238}_{92}U -> ^{234}_{90}Th + ^{4}_{2}He}$$

Beta decay:

$$\ce{^{14}_{6}C -> ^{14}_{7}N + ^{0}_{-1}e}$$

Gamma decay:

$$\ce{^{60}_{27}Co* -> ^{60}_{27}Co + \gamma}$$

Advanced Examples

Coordination Chemistry

Hexaamminecobalt(III) chloride:

$$\ce{[Co(NH3)6]Cl3}$$

Tetraamminecopper(II) sulfate:

$$\ce{[Cu(NH3)4]SO4}$$

Organic Mechanisms

SN2 reaction:

$$\ce{CH3Br + OH- -> CH3OH + Br-}$$

E2 elimination:

$$\ce{CH3CH2CH2Br + OH- -> CH3CH=CH2 + H2O + Br-}$$

Mathematical Notation in Chemistry

Equilibrium Constants

Acid dissociation constant:

$$K_a = \frac{[\ce{H+}][\ce{A-}]}{[\ce{HA}]}$$

Solubility product:

$$K_{sp} = [\ce{Ag+}][\ce{Cl-}]$$

Rate Laws

First-order reaction:

$$\ce{A -> B}$$

$$rate = k[\ce{A}]$$

Second-order reaction:

$$\ce{2A -> B}$$

$$rate = k[\ce{A}]^2$$

This page demonstrates the power of mhchem for rendering complex chemical notation in a clear and readable format.

2 - KaTeX Math Test Page

Test page for KaTeX mathematical formula rendering

KaTeX Math Test Page

This page demonstrates the mathematical formula rendering capabilities of KaTeX.

Inline Math

You can write inline math using single dollar signs: $E = mc^2$

Or using LaTeX delimiters: \( \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} \)

Block Math

For larger equations, use double dollar signs:

$$ \frac{\partial u}{\partial t} = h^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} + \frac{\partial^2 u}{\partial z^2} \right) $$

Or using LaTeX display mode:

\[ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} \]

Chemical Equations

KaTeX can also render chemical equations:

$$ 2H_2 + O_2 \rightarrow 2H_2O $$$$ CH_4 + 2O_2 \rightarrow CO_2 + 2H_2O $$

Complex Mathematical Expressions

$$ \begin{align} \nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\ \nabla \times \vec{B} &= \mu_0 \vec{J} + \mu_0 \epsilon_0 \frac{\partial \vec{E}}{\partial t} \end{align} $$

Matrix Notation

$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix} $$

This demonstrates that KaTeX is working correctly on your KintaroAI documentation site!

3 - Syntax Highlighting Test Page

This page demonstrates code syntax highlighting capabilities across different programming languages.

Python Examples

Basic Function

def fibonacci(n):
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Test the function
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Class Definition

class Transformer:
    def __init__(self, num_layers, d_model):
        self.num_layers = num_layers
        self.d_model = d_model
        self.layers = []
        
    def forward(self, x):
        for layer in self.layers:
            x = layer(x)
        return x
    
    def add_layer(self, layer):
        self.layers.append(layer)

JavaScript Examples

Async Function

async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
            throw new Error('User not found');
        }
        return await response.json();
    } catch (error) {
        console.error('Error fetching user:', error);
        return null;
    }
}

// Usage
fetchUserData(123).then(user => {
    console.log('User:', user);
});

React Component

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        fetchUserData(userId)
            .then(userData => {
                setUser(userData);
                setLoading(false);
            });
    }, [userId]);
    
    if (loading) return <div>Loading...</div>;
    if (!user) return <div>User not found</div>;
    
    return (
        <div className="user-profile">
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

Go Examples

HTTP Server

package main

import (
    "encoding/json"
    "log"
    "net/http"
)

type User struct {
    ID    int    `json:"id"`
    Name  string `json:"name"`
    Email string `json:"email"`
}

func handleUsers(w http.ResponseWriter, r *http.Request) {
    users := []User{
        {ID: 1, Name: "Alice", Email: "alice@example.com"},
        {ID: 2, Name: "Bob", Email: "bob@example.com"},
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(users)
}

func main() {
    http.HandleFunc("/api/users", handleUsers)
    log.Fatal(http.ListenAndServe(":8080", nil))
}

Goroutine Example

package main

import (
    "fmt"
    "sync"
    "time"
)

func worker(id int, jobs <-chan int, results chan<- int, wg *sync.WaitGroup) {
    defer wg.Done()
    for job := range jobs {
        fmt.Printf("Worker %d processing job %d\n", id, job)
        time.Sleep(time.Second)
        results <- job * 2
    }
}

func main() {
    jobs := make(chan int, 100)
    results := make(chan int, 100)
    
    var wg sync.WaitGroup
    
    // Start workers
    for w := 1; w <= 3; w++ {
        wg.Add(1)
        go worker(w, jobs, results, &wg)
    }
    
    // Send jobs
    for j := 1; j <= 9; j++ {
        jobs <- j
    }
    close(jobs)
    
    wg.Wait()
    close(results)
    
    // Collect results
    for result := range results {
        fmt.Printf("Result: %d\n", result)
    }
}

Rust Examples

Basic Struct

#[derive(Debug, Clone)]
struct Point {
    x: f64,
    y: f64,
}

impl Point {
    fn new(x: f64, y: f64) -> Self {
        Point { x, y }
    }
    
    fn distance(&self, other: &Point) -> f64 {
        let dx = self.x - other.x;
        let dy = self.y - other.y;
        (dx * dx + dy * dy).sqrt()
    }
}

fn main() {
    let p1 = Point::new(0.0, 0.0);
    let p2 = Point::new(3.0, 4.0);
    println!("Distance: {}", p1.distance(&p2));
}

SQL Examples

Complex Query

WITH user_stats AS (
    SELECT 
        u.id,
        u.name,
        COUNT(p.id) as post_count,
        AVG(p.rating) as avg_rating
    FROM users u
    LEFT JOIN posts p ON u.id = p.user_id
    WHERE u.created_at >= '2024-01-01'
    GROUP BY u.id, u.name
)
SELECT 
    name,
    post_count,
    ROUND(avg_rating, 2) as avg_rating
FROM user_stats
WHERE post_count > 0
ORDER BY avg_rating DESC
LIMIT 10;

Shell Script Examples

Bash Script

#!/bin/bash

# Configuration
BACKUP_DIR="/backup"
LOG_FILE="/var/log/backup.log"
RETENTION_DAYS=30

# Function to log messages
log_message() {
    echo "$(date '+%Y-%m-%d %H:%M:%S') - $1" >> "$LOG_FILE"
}

# Check if backup directory exists
if [ ! -d "$BACKUP_DIR" ]; then
    mkdir -p "$BACKUP_DIR"
    log_message "Created backup directory: $BACKUP_DIR"
fi

# Perform backup
log_message "Starting backup process..."
tar -czf "$BACKUP_DIR/backup-$(date +%Y%m%d).tar.gz" /data

if [ $? -eq 0 ]; then
    log_message "Backup completed successfully"
else
    log_message "Backup failed with exit code $?"
    exit 1
fi

# Clean up old backups
find "$BACKUP_DIR" -name "backup-*.tar.gz" -mtime +$RETENTION_DAYS -delete
log_message "Cleaned up backups older than $RETENTION_DAYS days"

YAML Examples

Docker Compose

version: '3.8'

services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./ssl:/etc/nginx/ssl
    environment:
      - NGINX_HOST=localhost
      - NGINX_PORT=80
    depends_on:
      - app

  app:
    build: .
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/myapp
      - REDIS_URL=redis://redis:6379
    depends_on:
      - db
      - redis

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:alpine
    command: redis-server --appendonly yes
    volumes:
      - redis_data:/data

volumes:
  postgres_data:
  redis_data:

HTML/CSS Examples

Responsive Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="grid">
            <div class="card">
                <h3>Card 1</h3>
                <p>This is a responsive card layout.</p>
            </div>
            <div class="card">
                <h3>Card 2</h3>
                <p>Cards will stack on mobile devices.</p>
            </div>
        </div>
    </div>
</body>
</html>

This demonstrates syntax highlighting for various programming languages and markup formats on your KintaroAI documentation site!