☰

HTML Preview Tool

Preview HTML code blocks with enhanced security and support for CSS animations

目前為 2024-11-19 提交的版本，檢視 最新版本。

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey 或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
elaine steven
評價
0 0 0
版本
0.2
建立日期
2024-11-19
更新日期
2024-11-19
尺寸
25.3 KB
授權條款
MIT
腳本執行於
所有網站

HTML Preview Tool

一个简单而强大的 Tampermonkey 用户脚本，用于在页面上直接预览 HTML 代码块。

功能特点

  • 🔍 实时预览 HTML 代码
  • 🔄 源码和预览模式快速切换
  • 🎨 现代化的 Tailwind 风格界面
  • 🛡️ 内置 XSS 防护
  • ⚡ 轻量级且高性能
  • 📱 响应式设计

安装步骤

  1. 首先确保你的浏览器已安装 Tampermonkey 扩展。

  2. 安装脚本：

    • 方法一：点击 安装链接 直接安装
    • 方法二：手动安装
      1. 打开 Tampermonkey 的管理面板
      2. 点击 "创建新脚本"
      3. 将 html-preview.user.js 中的代码复制粘贴进去
      4. 点击保存

使用方法

  1. 安装完成后，脚本会自动在支持的网页上运行
  2. 在包含 HTML 代码的代码块上方会出现 "源码" 和 "预览" 按钮
  3. 点击按钮即可切换显示模式：
    • "预览"：显示 HTML 的渲染效果
    • "源码"：显示原始 HTML 代码

技术特性

  • 使用 DOMPurify 进行 XSS 防护
  • Tailwind 风格的现代化 UI
  • 优雅的动画过渡效果
  • 错误处理和用户反馈
  • 响应式设计适配

自定义配置

你可以通过修改脚本中的样式部分来自定义界面外观：

许可证

本项目采用 MIT 许可证。查看 LICENSE 文件了解更多详情。

贡献指南

欢迎提交 Pull Requests！以下是参与贡献的步骤：

  1. Fork 本项目
  2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启一个 Pull Request

问题反馈

如果你发现任何问题或有改进建议，请：

  1. 查看 已知问题 列表
  2. 如果是新问题，请 创建 issue 并详细描述：
    • 问题现象
    • 复现步骤
    • 期望行为
    • 浏览器版本和系统环境

致谢