This section contains miscellaneous test pages, such as math and chemical reactions rendering as well as syntax highlighting.
This is the multi-page printable view of this section. Click here to print.
Miscellaneous Tests
1 - Chemical Reactions Test
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
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
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!