☰

Grok Code Style with Collapse

Shrink, collapse, compact, and download pre/code blocks on Grok pages

当前为 2025-03-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Grok Code Style with Collapse
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Shrink, collapse, compact, and download pre/code blocks on Grok pages
// @author       You
// @match        https://x.com/i/grok*
// @match        https://grok.com/*
// @match        https://grok.x.ai/*
// @match        https://x.ai/*
// @exclude      https://greasyfork.org/*
// @exclude      https://*.org/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加樣式
    GM_addStyle(`
        .code-wrapper {
            margin: 5px 0;
            position: relative;
        }
        .code-header {
            display: flex;
            justify-content: space-between;
            background-color: #e0e0e0;
            padding: 2px 5px;
            border: 1px solid #ddd;
            cursor: pointer;
            font-size: 10px;
            user-select: none; /* 防止選取文字 */
        }
        .code-content {
            max-height: 100px; /* 更緊湊 */
            overflow-y: hidden; /* 預設隱藏 */
            font-size: 10px;
            line-height: 1.1;
            background-color: #f5f5f5;
            padding: 3px;
            border: 1px solid #ddd;
            border-top: none;
            display: none;
            transition: max-height 0.3s ease; /* 平滑過渡 */
        }
        .code-content.expanded {
            display: block;
            max-height: 300px; /* 展開後更大範圍 */
            overflow-y: auto;
        }
        .download-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 1px 4px;
            cursor: pointer;
            font-size: 9px;
            margin-left: 5px;
        }
        .download-btn:hover {
            background-color: #45a049;
        }
    `);

    // 處理代碼塊
    function processCodeBlocks() {
        const codeElements = document.querySelectorAll(':not([class*="highlight"]:not([id*="highlight"])) > pre, :not([class*="highlight"]:not([id*="highlight"])) > code');
        codeElements.forEach((element, index) => {
            if (element.parentNode.classList.contains('code-wrapper')) return;

            const wrapper = document.createElement('div');
            wrapper.className = 'code-wrapper';

            const header = document.createElement('div');
            header.className = 'code-header';
            header.textContent = `代碼塊 ${index + 1} (點擊展開/摺疊)`;

            const downloadBtn = document.createElement('button');
            downloadBtn.className = 'download-btn';
            downloadBtn.textContent = '下載';
            downloadBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                const blob = new Blob([element.textContent], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `code_block_${index + 1}.txt`;
                a.click();
                URL.revokeObjectURL(url);
            });
            header.appendChild(downloadBtn);

            const content = document.createElement('div');
            content.className = 'code-content';
            content.appendChild(element.cloneNode(true));

            element.parentNode.replaceChild(wrapper, element);
            wrapper.appendChild(header);
            wrapper.appendChild(content);

            header.addEventListener('click', () => {
                content.classList.toggle('expanded');
            });
        });
    }

    // 優化監聽
    const observer = new MutationObserver((mutations) => {
        if (mutations.some(m => m.addedNodes.length > 0)) {
            processCodeBlocks();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
    processCodeBlocks(); // 初始執行
})();