The official VS Code extension for the Rezonto Web Publishing & Presentation Platform.
Rezonto Tools transforms your IDE into a specialized "Content Cockpit," making the process of writing and "packing" content for Rezonto sites simple, visual, and error-free.
🚀 Features
1. Instant Preview Launch (F5)
Stop manually juggling terminals and browser windows. Rezonto Tools integrates your site's preview server directly into VS Code's native "Run and Debug" workflow.
- One-Click Start: Simply press F5 to automatically start the Hugo server and launch a browser window with your live preview.
- Integrated Workflow: The preview server is managed in VS Code's built-in terminal, keeping your entire workflow in one place.
- Configurable Launch: The extension automatically creates a
launch.json file, allowing you to easily configure the preview launch (e.g., open in incognito mode).
2. Advanced Syntax Highlighting
Standard Markdown parsers struggle with Rezonto Markdown containing complex Hugo shortcodes, often turning them into a wall of grey text. Rezonto Tools brings your content to life with a custom-built grammar engine.
- Shortcode Structure: Instantly distinguish between opening/closing tags (
{{< ... >}}), shortcode names (optiCardList, optiButton), and parameters.
- Section Breaks: The
<!-- sectionBreak --> directive is clearly highlighted, making document structure visible at a glance.
- Markdown Inside Attributes: Unique support for highlighting Markdown syntax (bold, italic, headings) inside specific string parameters like
title, brief, and subtitle.
- Indentation Friendly: Works perfectly with nested structures and indented content, ensuring standard Markdown elements (lists, headings, bold/italic) are never broken by layout formatting.
🔧 Supported Constructs
The extension provides specialized highlighting for the full suite of Rezonto building blocks:
- Containers:
optiCardList, optiCard, optiBlock
- UI Elements:
optiButton, optiIcon, optiImages
- Navigation:
optiRef, optiCrossRef
- Structure:
<!-- sectionBreak -->
🔮 Roadmap
We are actively developing this extension to be the ultimate tool for Rezonto creators. Coming soon:
- Intelligent Code Folding: Collapse massive
optiCardList blocks or entire Sections to focus on what you are writing.
- Smart Snippets: Type
ocl or oc to instantly generate complex shortcode structures.
- Context-Aware Autocomplete: Intelligent suggestions for available parameters (
context, layout, etc.) and their values.
- Bi-Directional Navigation: Jump instantly from a content block ID to its styling definition in your CSS/SCSS files.
📦 Installation
- Open Visual Studio Code.
- Go to the Extensions view (Ctrl+Shift+X).
- Search for "Rezonto Tools".
- Click Install.
- Open your Rezonto project, see any
.md file containing Rezonto Markdown or go to the "Run and Debug" panel, and select "Rezonto: Launch Preview" to see it in action!
🤝 Contributing & Feedback
This extension is built to empower the Rezonto community. If you find a bug or have a feature request, please reach out or open an issue.
Enjoy building on your own land!
