如果您需要更纯粹、更沉浸的 HTML 交互编辑体验，我们强烈推荐您下载 Hylo 桌面端应用。
If you are looking for a more immersive and standalone HTML editing experience, we highly recommend downloading the Hylo Desktop App.
💻 更强大的内置编辑器 (Built-in Monaco Editor)：搭载与 VS Code 相同的 Monaco 编辑器内核，支持完整的代码自动补全、多光标编辑和各种快捷键。
🖥️ 独立窗口，专注体验 (Standalone Interface)：告别 VS Code 拥挤的侧边栏与多窗口干扰，提供专为 HTML 渲染和交互设计的无缝沉浸式工作区。
Bi-directional Syncing: Moving the code cursor or selecting a tag highlights the corresponding element in the preview and scrolls it into view. Clicking any element in the preview instantly jumps the editor cursor to the exact line of code.
Document Structure Navigation: The preview shows the current element path and provides an optional outline drawer for locating both source and rendered nodes.
High-Precision AST Mapping: Powered by the robust parse5 HTML parser, maintaining accurate Source Maps (Locations) of DOM nodes, even for complex, nested, or malformed HTML structures.
Background parsing for large documents: Documents above 512 KB move to a versioned Worker so stale results cannot replace newer edits.
Safe Preview in a sandbox iframe: Document scripts and remote resources are blocked by default, while user styles remain isolated from the extension toolbar.
Workspace Trust protection: Interactive Preview can be enabled only in trusted workspaces and runs HTTPS scripts inside the isolated frame.
Zero Configuration: Ready to use out of the box. No local server, ports, or setup required.
Tailwind CSS & CDNs: Seamlessly loads framework scripts (like Tailwind CSS) imported in the <head> tag, providing instant rendering updates.
🚀 如何使用 / How to Use
🇨🇳 中文说明
打开任意 .html 文件；
点击编辑器右上角标题栏的 Hylo 预览图标（或按下 Cmd+Shift+P / Ctrl+Shift+P 打开命令面板，输入 Hylo: Open HTML Preview）；
编辑左侧源码，右侧即可进行实时双向交互预览。
🇬🇧 English Instructions
Open any .html file inside VS Code;
Click the Hylo Preview Icon in the editor's top-right title bar (or open Command Palette with Cmd+Shift+P / Ctrl+Shift+P and search for Hylo: Open HTML Preview);
Edit your HTML on the left and see the bi-directional live preview on the right.
💡 常见问题与提示 / FAQ & Tips
Q: 为什么预览区没有加载我的 CSS 样式？/ Why is my custom CSS not rendering?
English: Safe Preview supports inline styles and local relative resources while blocking network CDNs. In a trusted workspace, switch to Interactive Preview to load HTTPS styles and scripts.
Q: 插件如何加载 Tailwind CSS？/ How to load Tailwind CSS?
中文：先确认工作区受信任并开启“交互预览”，再在 HTML 的 <head> 中引入 HTTPS Tailwind CDN：
