☰

HTML Preview Tool

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

如何安装

您需要先安装一个扩展，例如 篡改猴、Greasemonkey 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 Userscripts ，之后才能安装此脚本。

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

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

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

如何安装

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

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

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

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

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

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

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

作者
elaine steven
日安装量
0
总安装量
12
评分
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 并详细描述：
    • 问题现象
    • 复现步骤
    • 期望行为
    • 浏览器版本和系统环境

致谢