Shrink, collapse, compact, and download pre/code blocks on Grok pages
As of
// ==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(); // 初始執行
})();