89 lines
3.5 KiB
Markdown
89 lines
3.5 KiB
Markdown
|
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.
|