[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-code-highlighting-syntax-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":40,"related":41},"markdown-code-highlighting-syntax-complete-guide","Markdown Code Highlighting and Syntax Features: Complete Guide for Enhanced Technical Documentation","Master advanced Markdown code highlighting techniques with syntax specification, language detection, custom themes, and interactive code features. Learn professional code presentation for documentation, tutorials, and technical writing.","Advanced Markdown code highlighting transforms technical documentation by providing visually distinct, language-specific syntax coloring and enhanced readability for code examples across…","2025-10-04","Tutorial","Matthew Rathbone","markdown code highlighting, syntax highlighting markdown, code blocks markdown, programming language syntax, markdown code themes, technical documentation, markdown code examples, syntax highlighting themes",24,"\u003Cp>Advanced Markdown code highlighting transforms technical documentation by providing visually distinct, language-specific syntax coloring and enhanced readability for code examples across programming languages and markup formats. By implementing proper syntax specification, custom highlighting themes, and interactive code features, technical writers can create compelling documentation that improves code comprehension while maintaining the simplicity and portability that makes Markdown an ideal format for technical content creation.\u003C/p>\n\u003Ch2 id=\"why-master-code-highlighting-in-markdown\">Why Master Code Highlighting in Markdown?\u003C/h2>\n\u003Cp>Professional code highlighting provides essential benefits for technical documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Syntax coloring makes code structure and keywords immediately recognizable\u003C/li>\n\u003Cli>\u003Cstrong>Language Context\u003C/strong>: Proper syntax specification helps readers understand the programming language being demonstrated\u003C/li>\n\u003Cli>\u003Cstrong>Professional Presentation\u003C/strong>: Well-formatted code blocks create polished, publication-ready documentation\u003C/li>\n\u003Cli>\u003Cstrong>Learning Acceleration\u003C/strong>: Visual differentiation of syntax elements speeds comprehension for learners\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Platform Consistency\u003C/strong>: Standardized highlighting works across different Markdown processors and platforms\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-code-block-syntax\">Foundation Code Block Syntax\u003C/h2>\n\u003Ch3 id=\"basic-code-block-patterns\">Basic Code Block Patterns\u003C/h3>\n\u003Cp>Understanding the fundamental approaches to creating code blocks in Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Inline Code Examples\u003C/span>\n\nUse \u003Cspan class=\"hljs-code\">`backticks`\u003C/span> for inline code within sentences. For example, the \u003Cspan class=\"hljs-code\">`console.log()`\u003C/span> function outputs to the browser console.\n\n\u003Cspan class=\"hljs-section\"># Fenced Code Blocks\u003C/span>\n\nUse triple backticks for multi-line code blocks:\n\n\u003Cspan class=\"hljs-code\">```\nfunction greetUser(name) {\n    console.log("Hello, " + name + "!");\n}\n\ngreetUser("World");\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\"># Indented Code Blocks\u003C/span>\n\nAlternatively, use 4-space indentation:\n\n\u003Cspan class=\"hljs-code\">    def calculate_sum(a, b):\n        return a + b\n    \n    result = calculate_sum(10, 20)\n    print(f"Result: {result}")\n\u003C/span>\n\u003Cspan class=\"hljs-section\"># Language-Specific Highlighting\u003C/span>\n\nSpecify the programming language after opening backticks:\n\n\u003Cspan class=\"hljs-code\">```javascript\nconst API_URL = 'https://api.example.com';\n\nasync function fetchUserData(userId) {\n    try {\n        const response = await fetch(`${API_URL}/users/${userId}`);\n        if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n        }\n        const userData = await response.json();\n        return userData;\n    } catch (error) {\n        console.error('Failed to fetch user data:', error);\n        return null;\n    }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```python\nimport asyncio\nimport aiohttp\nfrom typing import Optional, Dict, Any\n\nclass APIClient:\n    def __init__(self, base_url: str, timeout: int = 30):\n        self.base_url = base_url.rstrip('/')\n        self.timeout = aiohttp.ClientTimeout(total=timeout)\n        \n    async def get_user(self, user_id: int) -> Optional[Dict[str, Any]]:\n        """Fetch user data from the API"""\n        async with aiohttp.ClientSession(timeout=self.timeout) as session:\n            url = f"{self.base_url}/users/{user_id}"\n            try:\n                async with session.get(url) as response:\n                    response.raise_for_status()\n                    return await response.json()\n            except aiohttp.ClientError as e:\n                print(f"API request failed: {e}")\n                return None\n\n# Usage example\nasync def main():\n    client = APIClient("https://api.example.com")\n    user_data = await client.get_user(123)\n    if user_data:\n        print(f"User: {user_data['name']}")\n\nasyncio.run(main())\n```\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```go\npackage main\n\nimport (\n    "context"\n    "encoding/json"\n    "fmt"\n    "net/http"\n    "time"\n)\n\ntype User struct {\n    ID    int    `json:"id"`\n    Name  string `json:"name"`\n    Email string `json:"email"`\n}\n\ntype APIClient struct {\n    baseURL    string\n    httpClient *http.Client\n}\n\nfunc NewAPIClient(baseURL string) *APIClient {\n    return &APIClient{\n        baseURL: baseURL,\n        httpClient: &http.Client{\n            Timeout: 30 * time.Second,\n        },\n    }\n}\n\nfunc (c *APIClient) GetUser(ctx context.Context, userID int) (*User, error) {\n    url := fmt.Sprintf("%s/users/%d", c.baseURL, userID)\n    \n    req, err := http.NewRequestWithContext(ctx, "GET", url, nil)\n    if err != nil {\n        return nil, fmt.Errorf("creating request: %w", err)\n    }\n    \n    resp, err := c.httpClient.Do(req)\n    if err != nil {\n        return nil, fmt.Errorf("making request: %w", err)\n    }\n    defer resp.Body.Close()\n    \n    if resp.StatusCode != http.StatusOK {\n        return nil, fmt.Errorf("API error: %s", resp.Status)\n    }\n    \n    var user User\n    if err := json.NewDecoder(resp.Body).Decode(&user); err != nil {\n        return nil, fmt.Errorf("decoding response: %w", err)\n    }\n    \n    return &user, nil\n}\n\nfunc main() {\n    client := NewAPIClient("https://api.example.com")\n    \n    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)\n    defer cancel()\n    \n    user, err := client.GetUser(ctx, 123)\n    if err != nil {\n        fmt.Printf("Error: %v\\n", err)\n        return\n    }\n    \n    fmt.Printf("User: %s (%s)\\n", user.Name, user.Email)\n}\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-language-support\">Advanced Language Support\u003C/h3>\n\u003Cp>Comprehensive syntax highlighting for specialized languages and formats:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Configuration Files\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## YAML Configuration\u003C/span>\n\u003Cspan class=\"hljs-code\">```yaml\n# Application Configuration\napp:\n  name: "Documentation System"\n  version: "2.1.0"\n  environment: production\n  \ndatabase:\n  host: localhost\n  port: 5432\n  name: docs_db\n  credentials:\n    username: ${DB_USER}\n    password: ${DB_PASS}\n  \ncache:\n  redis:\n    url: "redis://localhost:6379/0"\n    max_connections: 10\n  \nlogging:\n  level: info\n  format: json\n  outputs:\n    - console\n    - file: /var/log/app.log\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## JSON Configuration\u003C/span>\n\u003Cspan class=\"hljs-code\">```json\n{\n  "name": "markdown-docs",\n  "version": "1.0.0",\n  "description": "Advanced Markdown documentation system",\n  "main": "index.js",\n  "scripts": {\n    "start": "node index.js",\n    "dev": "nodemon index.js",\n    "build": "webpack --mode production",\n    "test": "jest --coverage"\n  },\n  "dependencies": {\n    "express": "^4.18.0",\n    "markdown-it": "^13.0.0",\n    "highlight.js": "^11.7.0"\n  },\n  "devDependencies": {\n    "nodemon": "^2.0.0",\n    "jest": "^29.0.0",\n    "webpack": "^5.70.0"\n  },\n  "engines": {\n    "node": ">=16.0.0",\n    "npm": ">=8.0.0"\n  }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## TOML Configuration\u003C/span>\n\u003Cspan class=\"hljs-code\">```toml\n[package]\nname = "markdown-processor"\nversion = "0.1.0"\nedition = "2021"\nauthors = ["Technical Writer <writer@example.com>"]\ndescription = "High-performance Markdown processing library"\n\n[dependencies]\ntokio = { version = "1.0", features = ["full"] }\nserde = { version = "1.0", features = ["derive"] }\npulldown-cmark = "0.9"\nsyntect = "5.0"\n\n[dev-dependencies]\ncriterion = "0.4"\ntempfile = "3.0"\n\n[[bin]]\nname = "markdown-cli"\npath = "src/main.rs"\n\n[profile.release]\nopt-level = 3\nlto = true\ncodegen-units = 1\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\"># Database Queries\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## SQL Examples\u003C/span>\n\u003Cspan class=\"hljs-code\">```sql\n-- Complex user analytics query\nWITH user_activity AS (\n    SELECT \n        u.id,\n        u.username,\n        u.email,\n        COUNT(DISTINCT s.id) as session_count,\n        COUNT(DISTINCT p.id) as page_views,\n        MAX(s.created_at) as last_activity,\n        AVG(s.duration) as avg_session_duration\n    FROM users u\n    LEFT JOIN sessions s ON u.id = s.user_id\n    LEFT JOIN page_views p ON s.id = p.session_id\n    WHERE u.created_at >= '2025-01-01'\n    GROUP BY u.id, u.username, u.email\n),\nengagement_metrics AS (\n    SELECT \n        id,\n        username,\n        email,\n        session_count,\n        page_views,\n        last_activity,\n        avg_session_duration,\n        CASE \n            WHEN session_count >= 10 AND page_views >= 50 THEN 'High'\n            WHEN session_count >= 5 AND page_views >= 20 THEN 'Medium'\n            ELSE 'Low'\n        END as engagement_level\n    FROM user_activity\n)\nSELECT \n    engagement_level,\n    COUNT(*) as user_count,\n    AVG(session_count) as avg_sessions,\n    AVG(page_views) as avg_page_views,\n    AVG(avg_session_duration) as avg_duration_minutes\nFROM engagement_metrics\nGROUP BY engagement_level\nORDER BY \n    CASE engagement_level\n        WHEN 'High' THEN 1\n        WHEN 'Medium' THEN 2\n        WHEN 'Low' THEN 3\n    END;\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## MongoDB Aggregation\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\ndb.users.aggregate([\n    {\n        $match: {\n            created_at: { $gte: new Date("2025-01-01") },\n            status: "active"\n        }\n    },\n    {\n        $lookup: {\n            from: "sessions",\n            localField: "_id",\n            foreignField: "user_id",\n            as: "sessions"\n        }\n    },\n    {\n        $lookup: {\n            from: "page_views",\n            localField: "sessions._id",\n            foreignField: "session_id",\n            as: "page_views"\n        }\n    },\n    {\n        $addFields: {\n            session_count: { $size: "$sessions" },\n            total_page_views: { $size: "$page_views" },\n            avg_session_duration: {\n                $avg: "$sessions.duration"\n            },\n            last_activity: {\n                $max: "$sessions.created_at"\n            }\n        }\n    },\n    {\n        $addFields: {\n            engagement_level: {\n                $switch: {\n                    branches: [\n                        {\n                            case: {\n                                $and: [\n                                    { $gte: ["$session_count", 10] },\n                                    { $gte: ["$total_page_views", 50] }\n                                ]\n                            },\n                            then: "High"\n                        },\n                        {\n                            case: {\n                                $and: [\n                                    { $gte: ["$session_count", 5] },\n                                    { $gte: ["$total_page_views", 20] }\n                                ]\n                            },\n                            then: "Medium"\n                        }\n                    ],\n                    default: "Low"\n                }\n            }\n        }\n    },\n    {\n        $group: {\n            _id: "$engagement_level",\n            user_count: { $sum: 1 },\n            avg_sessions: { $avg: "$session_count" },\n            avg_page_views: { $avg: "$total_page_views" },\n            avg_duration: { $avg: "$avg_session_duration" }\n        }\n    },\n    {\n        $sort: {\n            _id: 1\n        }\n    }\n]);\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"language-specific-highlighting-techniques\">Language-Specific Highlighting Techniques\u003C/h2>\n\u003Ch3 id=\"custom-syntax-extensions\">Custom Syntax Extensions\u003C/h3>\n\u003Cp>Implementing advanced highlighting for domain-specific languages and frameworks:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Infrastructure as Code\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Terraform Configuration\u003C/span>\n\u003Cspan class=\"hljs-code\">```hcl\n# AWS infrastructure definition\nterraform {\n  required_version = ">= 1.0"\n  required_providers {\n    aws = {\n      source  = "hashicorp/aws"\n      version = "~> 5.0"\n    }\n  }\n  \n  backend "s3" {\n    bucket         = "terraform-state-bucket"\n    key            = "infrastructure/terraform.tfstate"\n    region         = "us-west-2"\n    encrypt        = true\n    dynamodb_table = "terraform-locks"\n  }\n}\n\nprovider "aws" {\n  region = var.aws_region\n  \n  default_tags {\n    tags = {\n      Project     = "Documentation System"\n      Environment = var.environment\n      ManagedBy   = "Terraform"\n    }\n  }\n}\n\n# VPC Configuration\nresource "aws_vpc" "main" {\n  cidr_block           = var.vpc_cidr\n  enable_dns_hostnames = true\n  enable_dns_support   = true\n  \n  tags = {\n    Name = "${var.project_name}-vpc"\n  }\n}\n\nresource "aws_internet_gateway" "main" {\n  vpc_id = aws_vpc.main.id\n  \n  tags = {\n    Name = "${var.project_name}-igw"\n  }\n}\n\n# Public Subnets\nresource "aws_subnet" "public" {\n  count = length(var.availability_zones)\n  \n  vpc_id                  = aws_vpc.main.id\n  cidr_block              = cidrsubnet(var.vpc_cidr, 8, count.index)\n  availability_zone       = var.availability_zones[count.index]\n  map_public_ip_on_launch = true\n  \n  tags = {\n    Name = "${var.project_name}-public-${count.index + 1}"\n    Type = "Public"\n  }\n}\n\n# Application Load Balancer\nresource "aws_lb" "main" {\n  name               = "${var.project_name}-alb"\n  internal           = false\n  load_balancer_type = "application"\n  security_groups    = [aws_security_group.alb.id]\n  subnets            = aws_subnet.public[*].id\n  \n  enable_deletion_protection = var.environment == "production"\n  \n  tags = {\n    Name = "${var.project_name}-alb"\n  }\n}\n\n# ECS Cluster\nresource "aws_ecs_cluster" "main" {\n  name = "${var.project_name}-cluster"\n  \n  configuration {\n    execute_command_configuration {\n      logging = "OVERRIDE"\n      \n      log_configuration {\n        cloud_watch_log_group_name = aws_cloudwatch_log_group.ecs.name\n      }\n    }\n  }\n  \n  setting {\n    name  = "containerInsights"\n    value = "enabled"\n  }\n  \n  tags = {\n    Name = "${var.project_name}-cluster"\n  }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Docker Compose\u003C/span>\n\u003Cspan class=\"hljs-code\">```yaml\nversion: '3.8'\n\nservices:\n  # Application Service\n  app:\n    build:\n      context: .\n      dockerfile: Dockerfile\n      args:\n        - NODE_ENV=production\n    ports:\n      - "3000:3000"\n    environment:\n      - NODE_ENV=production\n      - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@db:5432/docs_db\n      - REDIS_URL=redis://redis:6379/0\n      - JWT_SECRET=${JWT_SECRET}\n    depends_on:\n      db:\n        condition: service_healthy\n      redis:\n        condition: service_started\n    volumes:\n      - ./uploads:/app/uploads\n      - ./logs:/app/logs\n    healthcheck:\n      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]\n      interval: 30s\n      timeout: 10s\n      retries: 3\n      start_period: 40s\n    restart: unless-stopped\n    networks:\n      - app-network\n  \n  # Database Service\n  db:\n    image: postgres:15-alpine\n    environment:\n      - POSTGRES_DB=docs_db\n      - POSTGRES_USER=postgres\n      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}\n    volumes:\n      - postgres_data:/var/lib/postgresql/data\n      - ./init-scripts:/docker-entrypoint-initdb.d\n    ports:\n      - "5432:5432"\n    healthcheck:\n      test: ["CMD-SHELL", "pg_isready -U postgres -d docs_db"]\n      interval: 10s\n      timeout: 5s\n      retries: 5\n    restart: unless-stopped\n    networks:\n      - app-network\n  \n  # Redis Cache Service\n  redis:\n    image: redis:7-alpine\n    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}\n    ports:\n      - "6379:6379"\n    volumes:\n      - redis_data:/data\n    restart: unless-stopped\n    networks:\n      - app-network\n  \n  # Nginx Reverse Proxy\n  nginx:\n    image: nginx:alpine\n    ports:\n      - "80:80"\n      - "443:443"\n    volumes:\n      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro\n      - ./nginx/ssl:/etc/nginx/ssl:ro\n      - ./static:/var/www/static:ro\n    depends_on:\n      - app\n    restart: unless-stopped\n    networks:\n      - app-network\n  \n  # Monitoring\n  prometheus:\n    image: prom/prometheus:latest\n    ports:\n      - "9090:9090"\n    volumes:\n      - ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml:ro\n      - prometheus_data:/prometheus\n    command:\n      - '--config.file=/etc/prometheus/prometheus.yml'\n      - '--storage.tsdb.path=/prometheus'\n      - '--web.console.libraries=/etc/prometheus/console_libraries'\n      - '--web.console.templates=/etc/prometheus/consoles'\n      - '--storage.tsdb.retention.time=200h'\n      - '--web.enable-lifecycle'\n    restart: unless-stopped\n    networks:\n      - app-network\n\nvolumes:\n  postgres_data:\n    driver: local\n  redis_data:\n    driver: local\n  prometheus_data:\n    driver: local\n\nnetworks:\n  app-network:\n    driver: bridge\n    ipam:\n      config:\n        - subnet: 172.20.0.0/16\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\"># Shell Scripts and DevOps\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Bash Deployment Script\u003C/span>\n\u003Cspan class=\"hljs-code\">```bash\n#!/bin/bash\n\n# Advanced deployment script with error handling and rollback\nset -euo pipefail\n\n# Configuration\nSCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"\nPROJECT_NAME="${PROJECT_NAME:-docs-system}"\nENVIRONMENT="${ENVIRONMENT:-staging}"\nBUILD_NUMBER="${BUILD_NUMBER:-$(date +%Y%m%d-%H%M%S)}"\nDEPLOY_TIMEOUT="${DEPLOY_TIMEOUT:-300}"\n\n# Color codes for output\nreadonly RED='\\033[0;31m'\nreadonly GREEN='\\033[0;32m'\nreadonly YELLOW='\\033[1;33m'\nreadonly BLUE='\\033[0;34m'\nreadonly NC='\\033[0m' # No Color\n\n# Logging functions\nlog_info() {\n    echo -e "${BLUE}[INFO]${NC} $1" >&2\n}\n\nlog_success() {\n    echo -e "${GREEN}[SUCCESS]${NC} $1" >&2\n}\n\nlog_warning() {\n    echo -e "${YELLOW}[WARNING]${NC} $1" >&2\n}\n\nlog_error() {\n    echo -e "${RED}[ERROR]${NC} $1" >&2\n}\n\n# Error handling\ncleanup_on_error() {\n    local exit_code=$?\n    log_error "Deployment failed with exit code $exit_code"\n    \n    if [[ -n "${PREVIOUS_VERSION:-}" ]]; then\n        log_info "Initiating rollback to previous version: $PREVIOUS_VERSION"\n        rollback_deployment "$PREVIOUS_VERSION"\n    fi\n    \n    exit $exit_code\n}\n\ntrap cleanup_on_error ERR\n\n# Health check function\ncheck_service_health() {\n    local service_url="$1"\n    local max_attempts="${2:-30}"\n    local attempt=1\n    \n    log_info "Checking service health at $service_url"\n    \n    while [[ $attempt -le $max_attempts ]]; do\n        if curl -sf --connect-timeout 5 --max-time 10 "$service_url" > /dev/null; then\n            log_success "Service is healthy"\n            return 0\n        fi\n        \n        log_info "Health check attempt $attempt/$max_attempts failed, waiting..."\n        sleep 10\n        ((attempt++))\n    done\n    \n    log_error "Service failed health checks after $max_attempts attempts"\n    return 1\n}\n\n# Deployment function\ndeploy_application() {\n    local version="$1"\n    \n    log_info "Starting deployment of version $version to $ENVIRONMENT"\n    \n    # Pull latest images\n    log_info "Pulling Docker images..."\n    docker-compose -f "docker-compose.${ENVIRONMENT}.yml" pull\n    \n    # Run database migrations if needed\n    if [[ -f "migrations/pending.txt" ]]; then\n        log_info "Running database migrations..."\n        docker-compose -f "docker-compose.${ENVIRONMENT}.yml" run --rm app npm run migrate\n    fi\n    \n    # Deploy with zero-downtime\n    log_info "Deploying services..."\n    docker-compose -f "docker-compose.${ENVIRONMENT}.yml" up -d --remove-orphans\n    \n    # Wait for services to be ready\n    local health_url="http://localhost:3000/health"\n    if ! check_service_health "$health_url" 30; then\n        log_error "Application health check failed"\n        return 1\n    fi\n    \n    log_success "Deployment completed successfully"\n}\n\n# Rollback function\nrollback_deployment() {\n    local target_version="$1"\n    \n    log_warning "Rolling back to version $target_version"\n    \n    # Set image tags to previous version\n    export IMAGE_TAG="$target_version"\n    \n    # Deploy previous version\n    docker-compose -f "docker-compose.${ENVIRONMENT}.yml" up -d --remove-orphans\n    \n    # Verify rollback\n    local health_url="http://localhost:3000/health"\n    if check_service_health "$health_url" 15; then\n        log_success "Rollback completed successfully"\n    else\n        log_error "Rollback failed - manual intervention required"\n        exit 1\n    fi\n}\n\n# Pre-deployment checks\nrun_pre_deployment_checks() {\n    log_info "Running pre-deployment checks..."\n    \n    # Check Docker daemon\n    if ! docker info > /dev/null 2>&1; then\n        log_error "Docker daemon is not running"\n        exit 1\n    fi\n    \n    # Check available disk space (minimum 2GB)\n    local available_space\n    available_space=$(df / | tail -1 | awk '{print $4}')\n    if [[ $available_space -lt 2000000 ]]; then\n        log_warning "Low disk space detected: ${available_space}KB available"\n    fi\n    \n    # Check if services are running\n    if docker-compose -f "docker-compose.${ENVIRONMENT}.yml" ps | grep -q "Up"; then\n        PREVIOUS_VERSION=$(docker-compose -f "docker-compose.${ENVIRONMENT}.yml" images | grep app | awk '{print $2}' | head -1)\n        log_info "Previous version detected: ${PREVIOUS_VERSION:-unknown}"\n    fi\n    \n    log_success "Pre-deployment checks passed"\n}\n\n# Post-deployment verification\nrun_post_deployment_verification() {\n    log_info "Running post-deployment verification..."\n    \n    # Test critical endpoints\n    local base_url="http://localhost:3000"\n    local endpoints=("/health" "/api/status" "/api/version")\n    \n    for endpoint in "${endpoints[@]}"; do\n        if ! curl -sf --connect-timeout 5 "$base_url$endpoint" > /dev/null; then\n            log_error "Endpoint $endpoint is not responding"\n            return 1\n        fi\n    done\n    \n    # Test database connectivity\n    if ! docker-compose -f "docker-compose.${ENVIRONMENT}.yml" exec -T db pg_isready -U postgres; then\n        log_error "Database connectivity test failed"\n        return 1\n    fi\n    \n    log_success "Post-deployment verification completed"\n}\n\n# Main deployment workflow\nmain() {\n    log_info "Starting deployment workflow for $PROJECT_NAME ($ENVIRONMENT)"\n    log_info "Build number: $BUILD_NUMBER"\n    \n    run_pre_deployment_checks\n    \n    deploy_application "$BUILD_NUMBER"\n    \n    run_post_deployment_verification\n    \n    # Clean up old images\n    log_info "Cleaning up old Docker images..."\n    docker image prune -f\n    \n    log_success "Deployment workflow completed successfully!"\n    log_info "Application is now running version $BUILD_NUMBER"\n}\n\n# Script entry point\nif [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then\n    main "$@"\nfi\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"interactive-code-features\">Interactive Code Features\u003C/h2>\n\u003Ch3 id=\"code-block-enhancements\">Code Block Enhancements\u003C/h3>\n\u003Cp>Advanced techniques for creating interactive and enhanced code presentations:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Enhanced Code Presentations\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Code with Line Numbers and Highlighting\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```javascript {linenos=true,hl_lines=[8,"15-17"],linenostart=1}\n// Advanced API client with retry logic and exponential backoff\nclass ResilientAPIClient {\n    constructor(baseURL, options = {}) {\n        this.baseURL = baseURL;\n        this.maxRetries = options.maxRetries || 3;\n        this.baseDelay = options.baseDelay || 1000;\n        this.maxDelay = options.maxDelay || 30000;\n        this.timeout = options.timeout || 10000; // Highlighted line\n        \n        // Create axios instance with default config\n        this.client = axios.create({\n            baseURL: this.baseURL,\n            timeout: this.timeout,\n            headers: {\n                'Content-Type': 'application/json',\n                'User-Agent': 'ResilientAPIClient/1.0.0' // Highlighted block start\n            }\n        }); // Highlighted block end\n    }\n    \n    async executeWithRetry(requestFn) {\n        let lastError;\n        \n        for (let attempt = 0; attempt <= this.maxRetries; attempt++) {\n            try {\n                const result = await requestFn();\n                return result;\n            } catch (error) {\n                lastError = error;\n                \n                if (attempt === this.maxRetries) {\n                    break;\n                }\n                \n                // Calculate delay with exponential backoff\n                const delay = Math.min(\n                    this.baseDelay * Math.pow(2, attempt),\n                    this.maxDelay\n                );\n                \n                console.log(`Request failed (attempt ${attempt + 1}), retrying in ${delay}ms...`);\n                await this.sleep(delay);\n            }\n        }\n        \n        throw lastError;\n    }\n    \n    sleep(ms) {\n        return new Promise(resolve => setTimeout(resolve, ms));\n    }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Tabbed Code Examples\u003C/span>\n\n\n\u003Cspan class=\"hljs-code\">```markdown\n<!-- Tab Group: API Implementation -->\n{% tabs %}\n\n{% tab title="Node.js" %}\n```\u003C/span>javascript\nconst express = require('express');\nconst helmet = require('helmet');\nconst compression = require('compression');\nconst rateLimit = require('express-rate-limit');\n\nconst app = express();\n\n// Security middleware\napp.use(helmet({\n\u003Cspan class=\"hljs-code\">    contentSecurityPolicy: {\n        directives: {\n            defaultSrc: ["'self'"],\n            styleSrc: ["'self'", "'unsafe-inline'"],\n            scriptSrc: ["'self'"],\n            imgSrc: ["'self'", "data:", "https:"],\n        },\n    },\n}));\n\u003C/span>\n// Rate limiting\nconst limiter = rateLimit({\n\u003Cspan class=\"hljs-code\">    windowMs: 15 * 60 * 1000, // 15 minutes\n    max: 100, // limit each IP to 100 requests per windowMs\n    message: {\n        error: 'Too many requests from this IP, please try again later.'\n    }\n});\n\u003C/span>\napp.use(limiter);\napp.use(compression());\napp.use(express.json({ limit: '10mb' }));\n\n// API Routes\napp.get('/api/users/:id', async (req, res) => {\n\u003Cspan class=\"hljs-code\">    try {\n        const userId = parseInt(req.params.id);\n        const user = await getUserById(userId);\n        \n        if (!user) {\n            return res.status(404).json({ error: 'User not found' });\n        }\n        \n        res.json({\n            success: true,\n            data: user\n        });\n    } catch (error) {\n        console.error('Error fetching user:', error);\n        res.status(500).json({ error: 'Internal server error' });\n    }\n});\n\u003C/span>\nconst PORT = process.env.PORT || 3000;\napp.listen(PORT, () => {\n\u003Cspan class=\"hljs-code\">    console.log(`Server running on port ${PORT}`);\n});\n```\n{% endtab %}\n\u003C/span>\n{% tab title="Python FastAPI" %}\n\u003Cspan class=\"hljs-code\">```python\nfrom fastapi import FastAPI, HTTPException, Depends, status\nfrom fastapi.middleware.cors import CORSMiddleware\nfrom fastapi.middleware.gzip import GZipMiddleware\nfrom fastapi.security import HTTPBearer, HTTPAuthorizationCredentials\nfrom fastapi_limiter import FastAPILimiter\nfrom fastapi_limiter.depends import RateLimiter\nimport redis.asyncio as redis\nfrom pydantic import BaseModel\nfrom typing import Optional\nimport logging\n\napp = FastAPI(\n    title="Documentation API",\n    description="Advanced API for documentation management",\n    version="2.0.0"\n)\n\n# Middleware\napp.add_middleware(GZipMiddleware, minimum_size=1000)\napp.add_middleware(\n    CORSMiddleware,\n    allow_origins=["https://docs.example.com"],\n    allow_credentials=True,\n    allow_methods=["GET", "POST", "PUT", "DELETE"],\n    allow_headers=["*"],\n)\n\n# Security\nsecurity = HTTPBearer()\n\nclass User(BaseModel):\n    id: int\n    name: str\n    email: str\n    is_active: bool = True\n\nclass UserResponse(BaseModel):\n    success: bool\n    data: User\n\n@app.on_event("startup")\nasync def startup():\n    redis_client = redis.from_url("redis://localhost", encoding="utf-8", decode_responses=True)\n    await FastAPILimiter.init(redis_client)\n\nasync def verify_token(credentials: HTTPAuthorizationCredentials = Depends(security)):\n    # Token verification logic here\n    if not credentials.credentials:\n        raise HTTPException(\n            status_code=status.HTTP_401_UNAUTHORIZED,\n            detail="Invalid authentication credentials"\n        )\n    return credentials.credentials\n\n@app.get("/api/users/{user_id}", \n         response_model=UserResponse,\n         dependencies=[Depends(RateLimiter(times=10, seconds=60))])\nasync def get_user(\n    user_id: int,\n    token: str = Depends(verify_token)\n) -> UserResponse:\n    """\n    Retrieve user information by ID.\n    \n    - **user_id**: The ID of the user to retrieve\n    - **Returns**: User information with success status\n    """\n    try:\n        user = await get_user_by_id(user_id)\n        \n        if not user:\n            raise HTTPException(\n                status_code=status.HTTP_404_NOT_FOUND,\n                detail="User not found"\n            )\n        \n        return UserResponse(success=True, data=user)\n        \n    except Exception as e:\n        logging.error(f"Error fetching user {user_id}: {str(e)}")\n        raise HTTPException(\n            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,\n            detail="Internal server error"\n        )\n\nif __name__ == "__main__":\n    import uvicorn\n    uvicorn.run(app, host="0.0.0.0", port=8000)\n```\u003C/span>\n{% endtab %}\n\n{% tab title="Go Gin" %}\n\u003Cspan class=\"hljs-code\">```go\npackage main\n\nimport (\n    "context"\n    "fmt"\n    "net/http"\n    "strconv"\n    "time"\n\n    "github.com/gin-contrib/cors"\n    "github.com/gin-contrib/gzip"\n    "github.com/gin-gonic/gin"\n    "github.com/go-redis/redis_rate/v10"\n    "github.com/go-redis/redis/v8"\n    "go.uber.org/zap"\n)\n\ntype User struct {\n    ID       int    `json:"id"`\n    Name     string `json:"name"`\n    Email    string `json:"email"`\n    IsActive bool   `json:"is_active"`\n}\n\ntype UserResponse struct {\n    Success bool `json:"success"`\n    Data    User `json:"data"`\n}\n\ntype APIError struct {\n    Error string `json:"error"`\n}\n\nfunc main() {\n    // Initialize logger\n    logger, _ := zap.NewProduction()\n    defer logger.Sync()\n\n    // Initialize Redis for rate limiting\n    rdb := redis.NewClient(&redis.Options{\n        Addr: "localhost:6379",\n    })\n    \n    limiter := redis_rate.NewLimiter(rdb)\n\n    // Initialize Gin router\n    router := gin.New()\n    \n    // Middleware\n    router.Use(gin.LoggerWithZap(logger, time.RFC3339, true))\n    router.Use(gin.RecoveryWithZap(logger, true))\n    router.Use(gzip.Gzip(gzip.DefaultCompression))\n    \n    // CORS configuration\n    config := cors.DefaultConfig()\n    config.AllowOrigins = []string{"https://docs.example.com"}\n    config.AllowCredentials = true\n    router.Use(cors.New(config))\n\n    // Rate limiting middleware\n    rateLimitMiddleware := func(c *gin.Context) {\n        ctx := context.Background()\n        key := "rate_limit:" + c.ClientIP()\n        \n        res, err := limiter.Allow(ctx, key, redis_rate.PerMinute(60))\n        if err != nil {\n            logger.Error("Rate limiting error", zap.Error(err))\n            c.Next()\n            return\n        }\n        \n        if res.Allowed == 0 {\n            c.JSON(http.StatusTooManyRequests, APIError{\n                Error: "Rate limit exceeded",\n            })\n            c.Abort()\n            return\n        }\n        \n        c.Next()\n    }\n\n    // Authentication middleware\n    authMiddleware := func(c *gin.Context) {\n        token := c.GetHeader("Authorization")\n        if token == "" {\n            c.JSON(http.StatusUnauthorized, APIError{\n                Error: "Authorization header required",\n            })\n            c.Abort()\n            return\n        }\n        \n        // Token validation logic here\n        // For demo purposes, we'll just check if it's not empty\n        \n        c.Next()\n    }\n\n    // API Routes\n    api := router.Group("/api", rateLimitMiddleware, authMiddleware)\n    {\n        api.GET("/users/:id", getUserHandler(logger))\n    }\n\n    // Start server\n    port := "8080"\n    logger.Info("Starting server", zap.String("port", port))\n    \n    if err := router.Run(":" + port); err != nil {\n        logger.Fatal("Failed to start server", zap.Error(err))\n    }\n}\n\nfunc getUserHandler(logger *zap.Logger) gin.HandlerFunc {\n    return func(c *gin.Context) {\n        userIDStr := c.Param("id")\n        userID, err := strconv.Atoi(userIDStr)\n        if err != nil {\n            c.JSON(http.StatusBadRequest, APIError{\n                Error: "Invalid user ID",\n            })\n            return\n        }\n\n        // Mock user retrieval\n        user, err := getUserByID(userID)\n        if err != nil {\n            logger.Error("Error fetching user", \n                zap.Int("user_id", userID),\n                zap.Error(err),\n            )\n            c.JSON(http.StatusInternalServerError, APIError{\n                Error: "Internal server error",\n            })\n            return\n        }\n\n        if user == nil {\n            c.JSON(http.StatusNotFound, APIError{\n                Error: "User not found",\n            })\n            return\n        }\n\n        c.JSON(http.StatusOK, UserResponse{\n            Success: true,\n            Data:    *user,\n        })\n    }\n}\n\nfunc getUserByID(id int) (*User, error) {\n    // Mock implementation\n    if id == 123 {\n        return &User{\n            ID:       123,\n            Name:     "John Doe",\n            Email:    "john@example.com",\n            IsActive: true,\n        }, nil\n    }\n    return nil, nil\n}\n```\u003C/span>\n{% endtab %}\n\n{% endtabs %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"code-annotation-and-documentation\">Code Annotation and Documentation\u003C/h3>\n\u003Cp>Advanced techniques for creating comprehensive code documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Annotated Code Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Function Documentation with Examples\u003C/span>\n\n\u003Cspan class=\"hljs-code\">```python\ndef process_markdown_with_highlighting(\n    content: str,\n    language: str = "markdown",\n    theme: str = "default",\n    line_numbers: bool = True,\n    highlight_lines: Optional[List[int]] = None\n) -> Dict[str, Any]:\n    """\n    Process Markdown content with advanced syntax highlighting.\n    \n    This function takes raw Markdown content and applies sophisticated\n    syntax highlighting with customizable themes and features.\n    \n    Args:\n        content (str): The raw Markdown content to process\n        language (str, optional): Programming language for syntax highlighting.\n            Defaults to "markdown". Supported languages include:\n            - markdown, html, css, javascript, python, go, rust, etc.\n        theme (str, optional): Color theme for highlighting.\n            Defaults to "default". Available themes:\n            - default, dark, light, github, monokai, solarized\n        line_numbers (bool, optional): Whether to show line numbers.\n            Defaults to True.\n        highlight_lines (List[int], optional): List of line numbers to highlight.\n            Defaults to None (no lines highlighted).\n    \n    Returns:\n        Dict[str, Any]: Processing result containing:\n            - 'html': Rendered HTML with syntax highlighting\n            - 'metadata': Processing metadata (language, theme, etc.)\n            - 'statistics': Processing statistics (line count, etc.)\n    \n    Raises:\n        ValueError: If the specified language is not supported\n        SyntaxError: If the content contains invalid syntax\n    \n    Example:\n        >>> content = '''\n        ... ```\u003C/span>python\n\u003Cspan class=\"hljs-code\">        ... def hello_world():\n        ...     print("Hello, World!")\n        ... ```\n        ... '''\n        >>> result = process_markdown_with_highlighting(\n        ...     content=content,\n        ...     language="python",\n        ...     theme="github",\n        ...     highlight_lines=[2]\n        ... )\n        >>> print(result['html'])\n        <div class="highlight github-theme">\n        <pre><code class="language-python">\n        <span class="lineno">1</span><span class="k">def</span> <span class="nf">hello_world</span>():\n        <span class="lineno highlight">2</span>    <span class="nb">print</span>(<span class="s">"Hello, World!"</span>)\n        </code></pre>\n        </div>\n    \n    Note:\n        The function automatically detects code blocks within Markdown\n        and applies appropriate syntax highlighting. Custom themes can\n        be added by extending the theme configuration.\n    """\n    \n    # Input validation\n    if not isinstance(content, str):\n        raise TypeError("Content must be a string")\n    \n    if language not in SUPPORTED_LANGUAGES:\n        raise ValueError(f"Unsupported language: {language}")\n    \n    # Initialize processor with theme\n    processor = MarkdownProcessor(theme=theme)\n    \n    # Configure highlighting options\n    options = HighlightingOptions(\n        show_line_numbers=line_numbers,\n        highlight_lines=highlight_lines or [],\n        theme=theme\n    )\n    \n    try:\n        # Process the content\n        result = processor.process(content, language, options)\n        \n        # Generate metadata\n        metadata = {\n            'language': language,\n            'theme': theme,\n            'line_count': content.count('\\n') + 1,\n            'processing_time': result.processing_time,\n            'features_enabled': {\n                'line_numbers': line_numbers,\n                'highlighted_lines': len(highlight_lines or [])\n            }\n        }\n        \n        # Compile statistics\n        statistics = {\n            'total_lines': metadata['line_count'],\n            'highlighted_lines': len(highlight_lines or []),\n            'processing_duration_ms': metadata['processing_time'],\n            'html_size_bytes': len(result.html.encode('utf-8'))\n        }\n        \n        return {\n            'html': result.html,\n            'metadata': metadata,\n            'statistics': statistics\n        }\n        \n    except Exception as e:\n        # Log the error for debugging\n        logger.error(f"Failed to process markdown content: {e}")\n        \n        # Re-raise with context\n        raise SyntaxError(f"Content processing failed: {e}") from e\n\u003C/span>\n\u003Cspan class=\"hljs-section\"># Example usage with error handling\u003C/span>\ndef main():\n\u003Cspan class=\"hljs-code\">    """Example usage of the markdown processor."""\n    \n    sample_content = '''\n# Sample Document\n\u003C/span>\nHere's a Python function example:\n\n\u003Cspan class=\"hljs-code\">```python\ndef fibonacci(n: int) -> int:\n    """Calculate the nth Fibonacci number."""\n    if n <= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n\n# Generate first 10 Fibonacci numbers\nfor i in range(10):\n    print(f"F({i}) = {fibonacci(i)}")\n```\u003C/span>\n\nAnd here's a JavaScript version:\n\n\u003Cspan class=\"hljs-code\">```javascript\nfunction fibonacci(n) {\n    if (n <= 1) return n;\n    return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\n// Generate first 10 Fibonacci numbers\nfor (let i = 0; i < 10; i++) {\n    console.log(`F(${i}) = ${fibonacci(i)}`);\n}\n```\u003C/span>\n\u003Cspan class=\"hljs-code\">    '''\n    \n    try:\n        result = process_markdown_with_highlighting(\n            content=sample_content,\n            theme="github",\n            highlight_lines=[5, 6, 7]  # Highlight function definition\n        )\n        \n        print("Processing successful!")\n        print(f"Generated HTML: {len(result['html'])} bytes")\n        print(f"Processing time: {result['statistics']['processing_duration_ms']}ms")\n        \n    except (ValueError, SyntaxError) as e:\n        print(f"Processing error: {e}")\n    except Exception as e:\n        print(f"Unexpected error: {e}")\n\u003C/span>\nif \u003Cspan class=\"hljs-strong\">__name__\u003C/span> == "\u003Cspan class=\"hljs-strong\">__main__\u003C/span>":\n\u003Cspan class=\"hljs-code\">    main()\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-highlighting-configuration\">Advanced Highlighting Configuration\u003C/h2>\n\u003Ch3 id=\"theme-customization-and-color-schemes\">Theme Customization and Color Schemes\u003C/h3>\n\u003Cp>Professional approaches to customizing syntax highlighting themes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Custom Theme Configuration\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## CSS Theme Definition\u003C/span>\n\u003Cspan class=\"hljs-code\">```css\n/* GitHub-inspired syntax highlighting theme */\n.highlight.github-theme {\n    background-color: #f6f8fa;\n    border: 1px solid #d1d5da;\n    border-radius: 6px;\n    padding: 16px;\n    overflow-x: auto;\n    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\n    font-size: 14px;\n    line-height: 1.45;\n}\n\n.highlight.github-theme code {\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    font-size: inherit;\n    color: inherit;\n    white-space: pre;\n    word-wrap: normal;\n}\n\n/* Line numbers */\n.highlight.github-theme .lineno {\n    color: #656d76;\n    user-select: none;\n    margin-right: 16px;\n    padding-right: 16px;\n    border-right: 1px solid #d1d5da;\n    display: inline-block;\n    min-width: 40px;\n    text-align: right;\n}\n\n.highlight.github-theme .lineno.highlight {\n    background-color: #fff8c5;\n    border-color: #f9c513;\n}\n\n/* Syntax highlighting colors */\n.highlight.github-theme .k { color: #d73a49; } /* Keywords */\n.highlight.github-theme .kn { color: #d73a49; } /* Keyword.Namespace */\n.highlight.github-theme .kp { color: #d73a49; } /* Keyword.Pseudo */\n.highlight.github-theme .kr { color: #d73a49; } /* Keyword.Reserved */\n.highlight.github-theme .kt { color: #d73a49; } /* Keyword.Type */\n\n.highlight.github-theme .s { color: #032f62; } /* Strings */\n.highlight.github-theme .s1 { color: #032f62; } /* String.Single */\n.highlight.github-theme .s2 { color: #032f62; } /* String.Double */\n.highlight.github-theme .se { color: #032f62; } /* String.Escape */\n.highlight.github-theme .si { color: #032f62; } /* String.Interpol */\n\n.highlight.github-theme .nb { color: #005cc5; } /* Name.Builtin */\n.highlight.github-theme .nf { color: #6f42c1; } /* Name.Function */\n.highlight.github-theme .nc { color: #6f42c1; } /* Name.Class */\n.highlight.github-theme .nn { color: #6f42c1; } /* Name.Namespace */\n\n.highlight.github-theme .m { color: #005cc5; } /* Numbers */\n.highlight.github-theme .mi { color: #005cc5; } /* Number.Integer */\n.highlight.github-theme .mf { color: #005cc5; } /* Number.Float */\n\n.highlight.github-theme .c { color: #6a737d; font-style: italic; } /* Comments */\n.highlight.github-theme .c1 { color: #6a737d; font-style: italic; } /* Comment.Single */\n.highlight.github-theme .cm { color: #6a737d; font-style: italic; } /* Comment.Multiline */\n\n.highlight.github-theme .o { color: #d73a49; } /* Operators */\n.highlight.github-theme .p { color: #24292e; } /* Punctuation */\n\n/* Dark theme variant */\n.highlight.github-dark-theme {\n    background-color: #0d1117;\n    border: 1px solid #30363d;\n    color: #f0f6fc;\n}\n\n.highlight.github-dark-theme .lineno {\n    color: #7d8590;\n    border-right-color: #30363d;\n}\n\n.highlight.github-dark-theme .lineno.highlight {\n    background-color: #ffd33d1a;\n    border-color: #ffd33d;\n}\n\n.highlight.github-dark-theme .k { color: #ff7b72; }\n.highlight.github-dark-theme .s { color: #a5d6ff; }\n.highlight.github-dark-theme .nb { color: #79c0ff; }\n.highlight.github-dark-theme .nf { color: #d2a8ff; }\n.highlight.github-dark-theme .nc { color: #d2a8ff; }\n.highlight.github-dark-theme .m { color: #79c0ff; }\n.highlight.github-dark-theme .c { color: #8b949e; }\n.highlight.github-dark-theme .o { color: #ff7b72; }\n.highlight.github-dark-theme .p { color: #f0f6fc; }\n\n/* Interactive features */\n.highlight pre {\n    position: relative;\n}\n\n.highlight .copy-button {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: #24292e;\n    color: #fff;\n    border: none;\n    border-radius: 4px;\n    padding: 4px 8px;\n    font-size: 12px;\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.highlight:hover .copy-button {\n    opacity: 1;\n}\n\n.highlight .copy-button:hover {\n    background: #1b1f23;\n}\n\n.highlight .copy-button.copied {\n    background: #28a745;\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n    .highlight {\n        font-size: 12px;\n        padding: 12px;\n    }\n    \n    .highlight .lineno {\n        min-width: 30px;\n        margin-right: 8px;\n        padding-right: 8px;\n    }\n}\n\n/* Print styles */\n@media print {\n    .highlight {\n        border: 1px solid #000;\n        background: #fff !important;\n        color: #000 !important;\n    }\n    \n    .highlight * {\n        color: #000 !important;\n        background: transparent !important;\n    }\n    \n    .highlight .copy-button {\n        display: none;\n    }\n}\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## JavaScript Enhancement\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\n/**\n * Enhanced code block functionality with copy, expand, and interaction features\n */\nclass CodeBlockEnhancer {\n    constructor(options = {}) {\n        this.options = {\n            enableCopy: true,\n            enableLineNumbers: true,\n            enableHighlighting: true,\n            enableExpansion: true,\n            maxHeight: 400, // pixels\n            ...options\n        };\n        \n        this.clipboard = null;\n        this.init();\n    }\n    \n    async init() {\n        // Initialize clipboard API if available\n        if (navigator.clipboard) {\n            this.clipboard = navigator.clipboard;\n        }\n        \n        // Process all code blocks\n        this.enhanceCodeBlocks();\n        \n        // Set up event listeners\n        this.setupEventListeners();\n    }\n    \n    enhanceCodeBlocks() {\n        const codeBlocks = document.querySelectorAll('pre code');\n        \n        codeBlocks.forEach((block, index) => {\n            this.enhanceCodeBlock(block, index);\n        });\n    }\n    \n    enhanceCodeBlock(codeBlock, index) {\n        const pre = codeBlock.parentElement;\n        const wrapper = document.createElement('div');\n        wrapper.className = 'enhanced-code-block';\n        wrapper.dataset.blockId = index;\n        \n        // Wrap the pre element\n        pre.parentElement.insertBefore(wrapper, pre);\n        wrapper.appendChild(pre);\n        \n        // Add toolbar\n        if (this.options.enableCopy) {\n            this.addCopyButton(wrapper, codeBlock);\n        }\n        \n        // Add line numbers if not present\n        if (this.options.enableLineNumbers && !codeBlock.querySelector('.lineno')) {\n            this.addLineNumbers(codeBlock);\n        }\n        \n        // Add expansion for long code blocks\n        if (this.options.enableExpansion) {\n            this.addExpansionFeature(wrapper, pre);\n        }\n        \n        // Add language detection and highlighting\n        if (this.options.enableHighlighting) {\n            this.enhanceSyntaxHighlighting(codeBlock);\n        }\n    }\n    \n    addCopyButton(wrapper, codeBlock) {\n        const toolbar = document.createElement('div');\n        toolbar.className = 'code-toolbar';\n        \n        const copyButton = document.createElement('button');\n        copyButton.className = 'copy-button';\n        copyButton.innerHTML = `\n            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">\n                <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>\n                <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>\n            </svg>\n            Copy\n        `;\n        copyButton.title = 'Copy code to clipboard';\n        \n        copyButton.addEventListener('click', () => {\n            this.copyCode(codeBlock, copyButton);\n        });\n        \n        toolbar.appendChild(copyButton);\n        wrapper.insertBefore(toolbar, wrapper.firstChild);\n    }\n    \n    async copyCode(codeBlock, button) {\n        // Get the code text without line numbers\n        let code = codeBlock.textContent;\n        \n        // Remove line numbers if present\n        code = code.replace(/^\\s*\\d+\\s*/gm, '');\n        \n        try {\n            if (this.clipboard) {\n                await this.clipboard.writeText(code);\n            } else {\n                // Fallback for older browsers\n                this.fallbackCopy(code);\n            }\n            \n            // Visual feedback\n            const originalText = button.innerHTML;\n            button.innerHTML = `\n                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">\n                    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>\n                </svg>\n                Copied!\n            `;\n            button.classList.add('copied');\n            \n            setTimeout(() => {\n                button.innerHTML = originalText;\n                button.classList.remove('copied');\n            }, 2000);\n            \n        } catch (error) {\n            console.error('Failed to copy code:', error);\n            \n            // Show error feedback\n            button.innerHTML = 'Copy failed';\n            setTimeout(() => {\n                button.innerHTML = originalText;\n            }, 2000);\n        }\n    }\n    \n    fallbackCopy(text) {\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        \n        try {\n            document.execCommand('copy');\n        } catch (error) {\n            throw new Error('Clipboard not supported');\n        } finally {\n            document.body.removeChild(textArea);\n        }\n    }\n    \n    addLineNumbers(codeBlock) {\n        const lines = codeBlock.textContent.split('\\n');\n        const numberedLines = lines.map((line, index) => {\n            const lineNumber = index + 1;\n            return `<span class="lineno">${lineNumber}</span>${line}`;\n        });\n        \n        codeBlock.innerHTML = numberedLines.join('\\n');\n    }\n    \n    addExpansionFeature(wrapper, pre) {\n        const maxHeight = this.options.maxHeight;\n        \n        if (pre.scrollHeight > maxHeight) {\n            pre.style.maxHeight = maxHeight + 'px';\n            pre.style.overflow = 'hidden';\n            \n            const expandButton = document.createElement('button');\n            expandButton.className = 'expand-button';\n            expandButton.textContent = 'Show more';\n            \n            expandButton.addEventListener('click', () => {\n                if (pre.style.maxHeight) {\n                    pre.style.maxHeight = '';\n                    pre.style.overflow = 'auto';\n                    expandButton.textContent = 'Show less';\n                } else {\n                    pre.style.maxHeight = maxHeight + 'px';\n                    pre.style.overflow = 'hidden';\n                    expandButton.textContent = 'Show more';\n                }\n            });\n            \n            wrapper.appendChild(expandButton);\n        }\n    }\n    \n    enhanceSyntaxHighlighting(codeBlock) {\n        // Detect language if not specified\n        const pre = codeBlock.parentElement;\n        let language = this.detectLanguage(codeBlock);\n        \n        if (language && !pre.classList.contains('language-' + language)) {\n            pre.classList.add('language-' + language);\n            codeBlock.classList.add('language-' + language);\n        }\n    }\n    \n    detectLanguage(codeBlock) {\n        const code = codeBlock.textContent;\n        \n        // Simple language detection patterns\n        const patterns = {\n            javascript: /(?:function|const|let|var|=>|\\.js)/,\n            python: /(?:def |import |from |print\\(|\\.py)/,\n            html: /<\\w+[^>]*>/,\n            css: /\\{[^}]*:[^}]*\\}/,\n            json: /^\\s*[\\{\\[]/,\n            bash: /^\\s*(?:\\$|#)/,\n            sql: /(?:SELECT|FROM|WHERE|INSERT|UPDATE|DELETE)/i\n        };\n        \n        for (const [lang, pattern] of Object.entries(patterns)) {\n            if (pattern.test(code)) {\n                return lang;\n            }\n        }\n        \n        return null;\n    }\n    \n    setupEventListeners() {\n        // Keyboard shortcuts\n        document.addEventListener('keydown', (event) => {\n            // Ctrl/Cmd + C on focused code block\n            if ((event.ctrlKey || event.metaKey) && event.key === 'c') {\n                const focused = document.activeElement;\n                if (focused && focused.closest('.enhanced-code-block')) {\n                    event.preventDefault();\n                    const codeBlock = focused.closest('.enhanced-code-block').querySelector('code');\n                    const copyButton = focused.closest('.enhanced-code-block').querySelector('.copy-button');\n                    if (codeBlock && copyButton) {\n                        this.copyCode(codeBlock, copyButton);\n                    }\n                }\n            }\n        });\n        \n        // Make code blocks focusable for keyboard navigation\n        document.querySelectorAll('.enhanced-code-block pre').forEach(pre => {\n            pre.setAttribute('tabindex', '0');\n            pre.setAttribute('role', 'region');\n            pre.setAttribute('aria-label', 'Code example');\n        });\n    }\n}\n\n// Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n    new CodeBlockEnhancer({\n        enableCopy: true,\n        enableLineNumbers: true,\n        enableExpansion: true,\n        maxHeight: 400\n    });\n});\n\n// Export for module systems\nif (typeof module !== 'undefined' && module.exports) {\n    module.exports = CodeBlockEnhancer;\n}\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Code highlighting systems integrate seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-table-accessibility-aria-complete-guide\">table accessibility and structured data presentation\u003C/a>, enhanced code blocks provide complete technical documentation experiences that serve developers with varying needs and assistive technology requirements while maintaining consistent presentation standards.\u003C/p>\n\u003Cp>For sophisticated content management, code highlighting works effectively with \u003Ca href=\"/blog/markdown-performance-optimization-rendering-speed-guide\">performance optimization systems\u003C/a> to ensure that syntax highlighting processing doesn't impact page load times, implementing efficient caching strategies and lazy loading techniques for code-heavy documentation platforms.\u003C/p>\n\u003Cp>When building comprehensive documentation architectures, code highlighting complements \u003Ca href=\"/blog/markdown-custom-html-components-complete-guide\">custom HTML components and extensions\u003C/a> by providing specialized code presentation components that integrate seamlessly with interactive documentation features while maintaining the simplicity of Markdown authoring workflows.\u003C/p>\n\u003Ch3 id=\"platform-specific-implementation\">Platform-Specific Implementation\u003C/h3>\n\u003Cp>Advanced integration techniques for popular documentation platforms:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Platform Integration Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Jekyll Integration\u003C/span>\n\u003Cspan class=\"hljs-code\">```yaml\n# _config.yml - Jekyll configuration for enhanced code highlighting\nhighlighter: rouge\nmarkdown: kramdown\n\nkramdown:\n  input: GFM\n  syntax_highlighter: rouge\n  syntax_highlighter_opts:\n    line_numbers: true\n    tab_width: 4\n    wrap: false\n    bold_every: 5\n\nplugins:\n  - jekyll-sitemap\n  - jekyll-feed\n  - rouge-themes\n\nrouge:\n  themes:\n    - github\n    - monokai\n    - solarized\n  \ncollections:\n  code_examples:\n    output: true\n    permalink: /:collection/:name/\n\ndefaults:\n  - scope:\n      path: "_code_examples"\n      type: "code_examples"\n    values:\n      layout: "code_example"\n      syntax_highlighting: true\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Hugo Integration\u003C/span>\n\u003Cspan class=\"hljs-code\">```yaml\n# config.yaml - Hugo configuration for code highlighting\nmarkup:\n  goldmark:\n    renderer:\n      unsafe: true\n  highlight:\n    lineNos: true\n    lineNumbersInTable: true\n    tabWidth: 4\n    style: github\n    noClasses: false\n    anchorLineNos: false\n    codeFences: true\n    guessSyntax: true\n    hl_Lines: ""\n\nparams:\n  code:\n    copy: true\n    maxShownLines: 50\n    theme: "github"\n    themes:\n      - github\n      - github-dark\n      - monokai\n      - solarized-dark\n      - solarized-light\n\nmenu:\n  main:\n    - name: "Code Examples"\n      url: "/examples/"\n      weight: 30\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## GitBook Integration\u003C/span>\n\u003Cspan class=\"hljs-code\">```javascript\n// book.json - GitBook plugin configuration\n{\n    "plugins": [\n        "advanced-code-blocks",\n        "code-highlighter",\n        "copy-code-button",\n        "tab-groups"\n    ],\n    "pluginsConfig": {\n        "advanced-code-blocks": {\n            "theme": "github",\n            "lineNumbers": true,\n            "copyButton": true,\n            "maxHeight": 400\n        },\n        "code-highlighter": {\n            "themes": [\n                "github",\n                "monokai",\n                "solarized-dark"\n            ],\n            "autoDetect": true,\n            "supportedLanguages": [\n                "javascript",\n                "python",\n                "go",\n                "rust",\n                "typescript",\n                "bash",\n                "sql",\n                "yaml",\n                "json"\n            ]\n        },\n        "copy-code-button": {\n            "copyText": "Copy to clipboard",\n            "copiedText": "Copied!",\n            "copyError": "Copy failed"\n        },\n        "tab-groups": {\n            "enableScrolling": true,\n            "theme": "default"\n        }\n    }\n}\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-and-best-practices\">Troubleshooting and Best Practices\u003C/h2>\n\u003Ch3 id=\"common-issues-and-solutions\">Common Issues and Solutions\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Code blocks not highlighting properly\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Ensure language specification is correct -->\n❌ Incorrect:\n\u003Cspan class=\"hljs-code\">```\n// JavaScript code but no language specified\nfunction example() {\n    return "Hello World";\n}\n```\u003C/span>\n\n✅ Correct:\n\u003Cspan class=\"hljs-code\">```javascript\n// JavaScript code with proper language specification\nfunction example() {\n    return "Hello World";\n}\n```\u003C/span>\n\n<!-- Check for unsupported language identifiers -->\n❌ Problematic:\n\u003Cspan class=\"hljs-code\">```js-react\n// Non-standard language identifier\nconst Component = () => <div>Hello</div>;\n```\u003C/span>\n\n✅ Better:\n\u003Cspan class=\"hljs-code\">```jsx\n// Standard JSX identifier\nconst Component = () => <div>Hello</div>;\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers not displaying correctly\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Ensure proper CSS is loaded */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> \u003Cspan class=\"hljs-selector-class\">.lineno\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix for responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> \u003Cspan class=\"hljs-selector-class\">.lineno\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Problem\u003C/strong>: Copy functionality not working\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Enhanced clipboard fallback\u003C/span>\n\u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">copyToClipboard\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Try modern Clipboard API first\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span> && \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">isSecureContext\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> navigator.\u003Cspan class=\"hljs-property\">clipboard\u003C/span>.\u003Cspan class=\"hljs-title function_\">writeText\u003C/span>(text);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Clipboard API failed:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Fallback for older browsers or insecure contexts\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title function_\">fallbackCopyTextToClipboard\u003C/span>(text);\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">fallbackCopyTextToClipboard\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> textArea = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">"textarea"\u003C/span>);\n    textArea.\u003Cspan class=\"hljs-property\">value\u003C/span> = text;\n    \n    \u003Cspan class=\"hljs-comment\">// Avoid scrolling to bottom\u003C/span>\n    textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">"0"\u003C/span>;\n    textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = \u003Cspan class=\"hljs-string\">"0"\u003C/span>;\n    textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">"fixed"\u003C/span>;\n    textArea.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">"0"\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(textArea);\n    textArea.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    textArea.\u003Cspan class=\"hljs-title function_\">select\u003C/span>();\n    \n    \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> successful = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">execCommand\u003C/span>(\u003Cspan class=\"hljs-string\">'copy'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(textArea);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> successful;\n    } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (err) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Fallback copy failed:'\u003C/span>, err);\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(textArea);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown code highlighting represents a critical component of professional technical documentation that enhances code comprehension, improves learning outcomes, and creates polished presentation standards for programming examples and technical tutorials. By implementing proper syntax specification, custom theme configuration, and interactive enhancement features, technical writers can create compelling documentation that serves developers across different skill levels and accessibility needs.\u003C/p>\n\u003Cp>The key to successful code highlighting lies in understanding both the technical implementation details and the user experience considerations that make code examples truly valuable for readers. Whether you're building simple tutorials or comprehensive API documentation, the techniques covered in this guide provide the foundation for creating professional-grade code presentation that enhances rather than complicates the content creation process.\u003C/p>\n\u003Cp>Remember to test your highlighting implementation across different browsers and devices, implement proper accessibility features for screen readers and keyboard navigation, and maintain consistency in your code presentation standards throughout your documentation. With proper implementation of advanced code highlighting techniques, your Markdown documentation can achieve the professional polish and technical accuracy that modern developers expect from high-quality technical content.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-master-code-highlighting-in-markdown","Why Master Code Highlighting in Markdown?",2,{"id":20,"text":21,"level":18},"foundation-code-block-syntax","Foundation Code Block Syntax",{"id":23,"text":24,"level":18},"language-specific-highlighting-techniques","Language-Specific Highlighting Techniques",{"id":26,"text":27,"level":18},"interactive-code-features","Interactive Code Features",{"id":29,"text":30,"level":18},"advanced-highlighting-configuration","Advanced Highlighting Configuration",{"id":32,"text":33,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":35,"text":36,"level":18},"troubleshooting-and-best-practices","Troubleshooting and Best Practices",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-code-block-syntax-highlighting-language-specification-complete-guide","Markdown Code Block Syntax Highlighting and Language Specification: Complete Guide to Enhanced Code Display and Documentation","Master advanced Markdown code block syntax highlighting, language specification, and enhanced code display for technical documentation. Learn highlighting techniques, language identifiers, and code presentation best practices.","Advanced Markdown code block syntax highlighting and language specification enable sophisticated technical documentation that provides clear, readable code examples with proper syntax coloring,…","2025-12-11","markdown code blocks, syntax highlighting markdown, code block languages, markdown code syntax, programming language markdown, code highlighting, fenced code blocks, markdown code display",22,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-syntax-highlighting-complete-guide","Markdown Syntax Highlighting: Complete Guide for Code Blocks","Master syntax highlighting in Markdown code blocks across platforms. Learn language identifiers, custom highlighting, and platform-specific features for better code presentation.","Code blocks are one of Markdown's most powerful features for technical writing, and syntax highlighting transforms plain code into readable, professionally formatted content. Understanding how to…","2025-08-18","markdown syntax highlighting, markdown code blocks, language highlighting, code formatting markdown, syntax coloring markdown, programming language markdown",8,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"markdown-code-annotations-documentation-complete-guide","Markdown Code Annotations and Documentation: Complete Guide for Technical Writing","Master code annotations, inline documentation, and technical writing in Markdown. Learn to create annotated code examples, documentation comments, and professional technical guides with proper formatting.","Code annotations and documentation in Markdown bridge the gap between raw code examples and comprehensive technical explanations, enabling writers to create clear, educational content that helps…","2025-08-31","markdown code annotations, markdown documentation, code comments markdown, technical writing markdown, annotated code examples, markdown code blocks, documentation comments",20,1792184942648]