我开发了代码实时预览插件：让ChatGPT拥有Claude同款能力（国内直接用）
前言
Hi，我是Maynor。作为AI深度使用者，我们都爱上了 ChatGPT 强大的代码生成能力，但在实际使用中常常会遇到一个困扰：无法像 Claude 那样实时预览代码效果。为了解决这个问题，我开发了一个油猴脚本，让 ChatGPT 秒变 Claude，轻松实现代码即写即看。
核心亮点
🚀 一键预览：自动识别代码块并提供实时预览 🎨 全面支持：HTML、SVG、Mermaid图表、PPT等多种格式 🔄 交互体验：所有预览内容支持显示/隐藏切换 ⚡ 轻量级：按需加载依赖，不影响基础性能
主要功能
1. HTML实时预览
脚本会自动识别对话中的 HTML 代码块，并提供实时预览功能。用户可以：
直接查看渲染效果 与预览内容进行交互 通过点击切换显示/隐藏原始代码
<div class="preview">
<h1>Hello World</h1>
<p>这是一个示例</p>
</div>
2. SVG图形渲染
对于 SVG 代码，脚本提供了专门的渲染支持：
自动将 SVG 代码转换为可视化图形 保持图形的清晰度和可缩放性 支持复杂的 SVG 动画效果
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue"/>
</svg>
3. Mermaid图表支持
集成了 Mermaid.js，支持多种图表类型：
流程图 时序图 甘特图 类图等
graph TD
A[开始] --> B{判断}
B -- Yes --> C[执行]
B -- No --> D[结束]
image-20241119153201002
技术实现
代码识别与渲染
使用 MutationObserver 监听 DOM 变化，实时检测新的代码块：
const observer = new MutationObserver(debounce(xuanranHTML, 500));
observer.observe(document.body, { childList: true, subtree: true });
统一的UI组件
为所有预览类型提供一致的用户界面：
可折叠的预览窗口 统一的控制按钮 优雅的过渡动画
动态加载依赖
按需加载外部库，优化性能：
if (typeof mermaid === 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js';
script.onload = () => {
mermaid.initialize({ startOnLoad: true });
mermaid.init(undefined, mermaidContainer);
};
document.head.appendChild(script);
}
使用方法
安装步骤
首先安装油猴插件(Tampermonkey)
Chrome用户：Chrome网上应用店 https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo Firefox用户：Firefox附加组件 https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/ Edge用户：Microsoft Store https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd 安装本增强脚本
https://greasyfork.org/en/scripts?filter_locale=0&q=maynorai
image-20241119160617561 在打开的页面中点击"安装"按钮 在弹出的Tampermonkey界面中确认安装 脚本安装链接：选择第一个脚本 使用说明
免费体验访问chatgpt网站：
https://free.chatgpt-plus.top/
MaynorAI所属的chatgpt网站均可使用
所有代码块将自动添加预览功能
点击代码块右上角的"预览"按钮即可查看效果
可随时切换显示/隐藏原始代码
常见问题
预览按钮不显示？
检查油猴插件是否正确安装 确认脚本是否启用 尝试刷新页面 预览效果无法加载？
检查网络连接 确认代码格式是否正确 尝试清除浏览器缓存
未来展望
计划添加的功能：
更多文件格式支持 代码高亮优化 交互式编辑功能 导出预览结果
结语
这个脚本大大提升了 ChatGPT 在编程对话中的实用性，让代码的展示和理解变得更加直观。
另外神级提示词也有油猴脚本了 还加了提示词管理功能。
参考资料
Mermaid.js 官方文档 MutationObserver MDN文档
没有评论:
发表评论