回答

我一直用这个油猴脚本，非常好，不仅能在lmarena生成代码后有预览按钮，还有新窗口打开，下载复制等按钮，非常方便

点击查看代码

// ==UserScript==
// @name         LM Arena HTML 代码预览器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在 lmarena.ai 的 pre 标签下添加 iframe 预览按钮，可预览 HTML 代码
// @author       You
// @match        https://lmarena.ai/*
// @match        https://web.lmarena.ai/*
// @match        https://*.lmarena.ai/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 样式
    const style = document.createElement('style');
    style.textContent = `
        .html-preview-container {
            margin-top: 8px;
            border-radius: 8px;
            overflow: hidden;
        }

        .html-preview-btn-group {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .html-preview-btn {
            padding: 6px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .html-preview-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .html-preview-btn:active {
            transform: translateY(0);
        }

        .html-preview-btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .html-preview-btn-success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }

        .html-preview-btn-danger {
            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
            color: white;
        }

        .html-preview-btn-info {
            background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
            color: white;
        }

        .html-preview-btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .html-preview-iframe-container {
            margin-top: 10px;
            border: 2px solid #667eea;
            border-radius: 8px;
            overflow: hidden;
            background: white;
            position: relative;
        }

        .html-preview-iframe-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 12px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .html-preview-iframe-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .html-preview-iframe-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .html-preview-iframe-dot.red { background: #ff5f56; }
        .html-preview-iframe-dot.yellow { background: #ffbd2e; }
        .html-preview-iframe-dot.green { background: #27ca40; }

        .html-preview-iframe {
            width: 100%;
            height: 400px;
            border: none;
            background: white;
        }

        .html-preview-resize-handle {
            height: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            cursor: ns-resize;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .html-preview-resize-handle::after {
            content: '';
            width: 50px;
            height: 3px;
            background: rgba(255,255,255,0.5);
            border-radius: 2px;
        }

        .html-preview-size-btns {
            display: flex;
            gap: 4px;
        }

        .html-preview-size-btn {
            padding: 2px 8px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 11px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .html-preview-size-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .html-preview-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 999999 !important;
            margin: 0 !important;
            border: none !important;
            border-radius: 0 !important;
        }

        .html-preview-fullscreen .html-preview-iframe {
            height: calc(100vh - 40px) !important;
        }

        .html-preview-badge {
            background: rgba(255,255,255,0.2);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            margin-left: 8px;
        }
    `;
    document.head.appendChild(style);

    // 检测是否是 HTML 代码
    function isHTMLCode(code) {
        const trimmed = code.trim();
        // 检查常见的 HTML 标记
        const htmlPatterns = [
            /^<!DOCTYPE\s+html/i,
            /^<html[\s>]/i,
            /<\/html>/i,
            /<head[\s>]/i,
            /<body[\s>]/i,
            /^<div[\s>]/i,
            /^<style[\s>]/i,
            /^<script[\s>]/i,
            /<\/div>/i,
            /<\/style>/i,
            /^<[a-z]+[^>]*>/i
        ];
        
        let matchCount = 0;
        for (const pattern of htmlPatterns) {
            if (pattern.test(trimmed)) {
                matchCount++;
            }
        }
        
        // 至少匹配2个模式才认为是 HTML
        return matchCount >= 1 && (
            trimmed.startsWith('<') || 
            trimmed.includes('</') ||
            /<!DOCTYPE/i.test(trimmed)
        );
    }

    // 获取代码内容
    function getCodeContent(preElement) {
        const codeElement = preElement.querySelector('code');
        if (codeElement) {
            return codeElement.textContent || codeElement.innerText;
        }
        return preElement.textContent || preElement.innerText;
    }

    // 创建预览按钮组
    function createPreviewButtons(preElement) {
        const code = getCodeContent(preElement);
        
        if (!isHTMLCode(code)) {
            return null;
        }

        const container = document.createElement('div');
        container.className = 'html-preview-container';
        container.setAttribute('data-preview-added', 'true');

        const btnGroup = document.createElement('div');
        btnGroup.className = 'html-preview-btn-group';

        // 预览按钮
        const previewBtn = document.createElement('button');
        previewBtn.className = 'html-preview-btn html-preview-btn-primary';
        previewBtn.innerHTML = '