Plan for Adding Highlight.js Syntax Highlighting to the Web Builder Framework

    1. Create Highlight.js Optimizer Module (framework/optimizers/optimize-highlight.nu)

    - Detect <pre><code> or <code class="language-*"> blocks in HTML
    - Automatically download/bundle highlight.js core and language modules
    - Support for CDN or local bundling options
    - Minify highlight.js assets in production
    - Support custom themes (default: github-dark or monokai)

    2. Extend Configuration System (Update page.config.toml.template)

    - Add [highlight] section:
      - enabled: Auto-detect or manually enable
      - auto_detect: Automatically detect code blocks in HTML
      - languages: List of programming languages to support
      - theme: Theme name (github-dark, monokai, dracula, etc.)
      - line_numbers: Enable line numbers
      - copy_button: Add copy-to-clipboard button
      - cdn: Use CDN (true) or bundle locally (false)

    3. Update Build Pipeline (framework/core/build.nu)

    - Add highlight detection step before HTML processing
    - Inject highlight.js CSS/JS when code blocks detected
    - Bundle only required language modules to minimize size
    - Add CSS for selected theme
    - Ensure proper loading order (CSS in head, JS before )

    4. Create Highlight.js Assets Manager

    - Download and cache highlight.js assets in shared/vendor/highlight/
    - Support for multiple themes in shared/vendor/highlight/styles/
    - Language-specific modules in shared/vendor/highlight/languages/
    - Automatic version management

    5. HTML Processing Enhancement (framework/optimizers/optimize-html.nu)

    - Scan HTML for code blocks
    - Add appropriate classes for highlight.js
    - Inject highlight initialization script
    - Add copy button functionality if enabled
    - Support for inline code vs block code

    6. Create Code Block Templates

    - Template for code blocks with copy button
    - Template for line numbers wrapper
    - Template for language badge display

    Configuration Example:

    [highlight]
    enabled = "auto"  # auto, true, false
    auto_detect = true  # Scan HTML for code blocks
    languages = ["javascript", "rust", "python", "bash", "toml", "json", "html", "css"]
    theme = "github-dark"  # or monokai, dracula, tomorrow-night
    line_numbers = true
    copy_button = true
    cdn = false  # Bundle locally for better performance
    cdn_url = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/"

    Features to Implement:

    - Auto-detection: Scan HTML for <pre><code> blocks
    - Language detection: Parse class="language-*" attributes
    - Minimal bundle: Only include detected languages
    - Theme switching: Support multiple themes
    - Performance: Lazy loading for large code blocks
    - Accessibility: Proper ARIA labels and keyboard navigation
    - Copy functionality: One-click code copying
    - Line highlighting: Support for highlighting specific lines

    Build Process Flow:

    1. Parse HTML content for code blocks
    2. Extract required languages from class attributes
    3. If code blocks found:
      - Bundle/reference highlight.js core
      - Bundle/reference only needed language modules
      - Include selected theme CSS
      - Add initialization JavaScript
      - Add copy button JavaScript if enabled
    4. Minify all assets in production
    5. Update HTML with proper script/style tags

    This implementation will automatically enhance any page with code blocks while keeping bundle sizes minimal by only including
    necessary components.