Greasy Fork

Greasy Fork is available in English.

HTML 实时渲染器 (带全屏功能)

在任意网页打开一个悬浮窗，粘贴HTML代码并实时预览，支持全屏

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Userscripts ，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
Muzhe Yun
日安装量
0
总安装量
9
评分
0 0 0
版本
1.1
创建于
2025-12-31
更新于
2025-12-31
大小
7.1 KB
许可证
MIT
适用于
所有网站

📝 HTML 实时渲染器 (HTML Previewer) - 油猴脚本

📖 简介 (Introduction)

这是一个轻量级的 Tampermonkey (油猴) 脚本，它能够在当前浏览器的任意页面上，注入一个悬浮的 HTML/CSS/JS 代码编辑与预览面板。

它的核心功能类似于本地版的 "CodePen" 或 "JSFiddle"。通过使用 Shadow DOM/Iframe 隔离技术，确保你编写的代码不会影响当前网页的样式，同时也支持 全屏沉浸式编辑。

非常适合前端开发者调试代码片段，或者临时渲染一些 HTML 内容。

✨ 主要功能 (Features)

  • ⚡️ 实时渲染：在一个悬浮窗中输入 HTML，点击按钮即可查看渲染结果。
  • 🖥️ 样式隔离：使用 <iframe> 渲染内容，你的 CSS 不会污染当前网页。
  • ⛶ 全屏模式：支持一键切换全屏/窗口模式，提供更大的编码视野。
  • ⌨️ 快捷键支持：支持 Ctrl + Enter 快速触发渲染。
  • 🎨 现代化 UI：清爽的界面，支持代码高亮（基础），并在关闭后保持静默。

🛠 安装方法 (Installation)

  1. 确保你的浏览器已安装 Tampermonkey 扩展。
  2. 点击扩展图标，选择 "添加新脚本..."。
  3. 将下方的 脚本源码 完整复制并覆盖编辑器中的默认内容。
  4. 按 Ctrl + S 保存即可。

📖 使用说明 (Usage)

  1. 打开面板：
    • 打开任意网页（或浏览器空白页）。
    • 点击浏览器右上角的 Tampermonkey 图标。
    • 在菜单中点击 "打开/关闭 HTML 渲染器"。
  2. 编写代码：
    • 在左侧输入框粘贴或编写 HTML/CSS/JS 代码。
  3. 预览：
    • 点击底部的 "渲染 (Render)" 按钮，或按下 Ctrl + Enter。
  4. 全屏：
    • 点击面板右上角的 □ 按钮即可全屏，再次点击即可还原。

⚠️ 注意事项

  • CSP 限制：部分网站（如 GitHub, Twitter）有严格的内容安全策略 (CSP)，可能会阻止 Iframe 内部脚本的执行。如果遇到无法渲染的情况，请尝试在简单的网站（如百度）或空白页 (about:blank) 上使用。