Tutorials Updated: November 03, 2025

Code Highlighting & Copy Feature Test

Code Highlighting Tutorial

This documentation system includes powerful syntax highlighting using Prism.js. You can display code in multiple programming languages with beautiful formatting.

Supported Languages

The system supports syntax highlighting for:

  • PHP
  • JavaScript
  • Python
  • HTML/CSS
  • SQL
  • Bash/Shell
  • And many more...

PHP Example

<?php\n// Database connection example\n$host = 'localhost';\n$dbname = 'my_database';\n$username = 'root';\n$password = '';\n\ntry {\n    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);\n    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);\n    echo "Connected successfully";\n} catch(PDOException $e) {\n    echo "Connection failed: " . $e->getMessage();\n}\n?>

JavaScript Example

// Async/await example\nasync function fetchUserData(userId) {\n    try {\n        const response = await fetch(`/api/users/${userId}`);\n        const data = await response.json();\n        return data;\n    } catch (error) {\n        console.error('Error fetching user:', error);\n        throw error;\n    }\n}\n\n// Usage\nfetchUserData(123)\n    .then(user => console.log(user))\n    .catch(err => console.error(err));

Python Example

# Python class example\nclass DocumentManager:\n    def __init__(self, db_connection):\n        self.db = db_connection\n        self.documents = []\n    \n    def add_document(self, title, content):\n        """Add a new document to the system"""\n        doc = {\n            'title': title,\n            'content': content,\n            'created_at': datetime.now()\n        }\n        self.documents.append(doc)\n        return doc\n    \n    def search(self, query):\n        """Search documents by title or content"""\n        results = []\n        for doc in self.documents:\n            if query.lower() in doc['title'].lower() or query.lower() in doc['content'].lower():\n                results.append(doc)\n        return results

SQL Example

-- Create a users table\nCREATE TABLE users (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    username VARCHAR(50) NOT NULL UNIQUE,\n    email VARCHAR(100) NOT NULL UNIQUE,\n    password_hash VARCHAR(255) NOT NULL,\n    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP\n);\n\n-- Insert sample data\nINSERT INTO users (username, email, password_hash) VALUES\n('john_doe', '[email protected]', '$2y$10$...'),\n('jane_smith', '[email protected]', '$2y$10$...');\n\n-- Query with JOIN\nSELECT u.username, COUNT(d.id) as doc_count\nFROM users u\nLEFT JOIN documents d ON u.id = d.author_id\nGROUP BY u.id\nORDER BY doc_count DESC;

Bash/Shell Example

#!/bin/bash\n\n# Backup script example\nBACKUP_DIR="/var/backups/docs"\nDATE=$(date +%Y%m%d_%H%M%S)\nDB_NAME="docs_system"\n\n# Create backup directory if it doesn't exist\nmkdir -p "$BACKUP_DIR"\n\n# Dump database\nmysqldump -u root -p$DB_PASS $DB_NAME > "$BACKUP_DIR/backup_$DATE.sql"\n\n# Compress backup\ngzip "$BACKUP_DIR/backup_$DATE.sql"\n\necho "Backup completed: backup_$DATE.sql.gz"

HTML/CSS Example

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Documentation System</title>\n    <style>\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 20px;\n        }\n        \n        .card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            padding: 20px;\n        }\n    </style>\n</head>\n<body>\n    <div class="container">\n        <div class="card">\n            <h1>Welcome to Documentation</h1>\n            <p>Start exploring our comprehensive guides.</p>\n        </div>\n    </div>\n</body>\n</html>

Copy to Clipboard Feature

Each code block includes a "Copy" button in the top-right corner. Click it to copy the entire code snippet to your clipboard instantly!

How to Add Code in Your Documents

When creating or editing documents in the admin panel, use the following format:

<pre><code class="language-php">\n// Your PHP code here\n</code></pre>

Replace language-php with the appropriate language class:

  • language-php for PHP
  • language-javascript for JavaScript
  • language-python for Python
  • language-sql for SQL
  • language-bash for Bash/Shell
  • language-html for HTML
  • language-css for CSS
Back to Tutorials