如果您需要更纯粹、更沉浸的 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.
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.
Shadow DOM Sandboxing: Uses Shadow DOM to strictly isolate the preview styles from VS Code's editor styles, ensuring your custom CSS never pollutes the editor's UI.
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?
中文:为了保障编辑器的安全,预览区是沙盒隔离的。请确保您的 HTML 中有 <style> 标签或 <link rel="stylesheet"> 样式表引入。本插件支持本地相对路径和网络 CDN 地址。
English: To prevent style bleeding into the editor, the preview runs in a sandboxed Shadow DOM. Make sure your HTML includes inline <style> tags or <link rel="stylesheet"> files. Both relative paths and remote CDNs are fully supported.
Q: 插件如何加载 Tailwind CSS?/ How to load Tailwind CSS?