☰

HTML Preview Tool

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

Paano mag install

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

Advertisement:

Paano mag install

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Advertisement:
May akda
elaine steven
Mga pang araw araw na pag install
0
Kabuuan na installs
16
Mga Rating
0 0 0
Bersyon
0.2
Nilikha
2024-11-19
Na update
2024-11-19
Laki
25.3 KB
Lisensya
MIT
Nalalapat sa
Lahat sites

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 并详细描述：
    • 问题现象
    • 复现步骤
    • 期望行为
    • 浏览器版本和系统环境

致谢