快速美化帖子样式小工具
由豆包生成。SCP中分针对帖子内的网页元素设计了一些样式上的限制（例如禁止padding和margin等属性），该工具用于在此限制上快速美化代码块和等宽字样式。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wikidot语法转换器</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3b82f6', secondary: '#64748b', neutral: '#f1f5f9', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .textarea-height { min-height: 300px; } @media (max-width: 640px) { .textarea-height { min-height: 200px; } } } </style> </head> <body class="bg-gray-50 text-gray-800 font-sans"> <div class="container mx-auto px-4 py-6 max-w-5xl"> <!-- 标题区域 --> <header class="mb-6 text-center"> <p class="text-secondary text-sm">支持[[code]]和等宽字转换</p> </header> <!-- 主要内容区域 --> <main class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- 输入区域 --> <div class="bg-white rounded-lg shadow-sm p-4"> <label for="input" class="block text-sm font-medium text-gray-700 mb-2 flex items-center"> <i class="fa fa-pencil-square-o mr-2 text-primary"></i>输入内容 </label> <textarea id="input" class="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all textarea-height resize-y" placeholder="在此输入需要转换的文本..."></textarea> </div> <!-- 输出区域 --> <div class="bg-white rounded-lg shadow-sm p-4"> <label for="output" class="block text-sm font-medium text-gray-700 mb-2 flex items-center"> <i class="fa fa-code mr-2 text-primary"></i>转换结果 </label> <textarea id="output" class="w-full p-3 border border-gray-300 rounded-md bg-gray-50 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all textarea-height resize-y" readonly placeholder="转换后的内容将显示在这里..."></textarea> </div> </main> <!-- 按钮区域 --> <div class="mt-6 flex flex-wrap gap-3 justify-center"> <button id="convertBtn" class="px-5 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center"> <i class="fa fa-exchange mr-2"></i>转换 </button> <button id="copyBtn" class="px-5 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors flex items-center"> <i class="fa fa-copy mr-2"></i>复制结果 </button> <button id="clearBtn" class="px-5 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"> <i class="fa fa-trash mr-2"></i>清空 </button> </div> <!-- 状态提示 --> <div id="status" class="mt-4 text-center hidden"></div> </div> <script> // 获取DOM元素 const input = document.getElementById('input'); const output = document.getElementById('output'); const convertBtn = document.getElementById('convertBtn'); const copyBtn = document.getElementById('copyBtn'); const clearBtn = document.getElementById('clearBtn'); const status = document.getElementById('status'); // 显示状态消息 function showStatus(message, isError = false) { status.textContent = message; status.className = `mt-4 text-center px-3 py-2 rounded-md ${isError ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`; status.classList.remove('hidden'); // 3秒后自动隐藏 setTimeout(() => { status.classList.add('hidden'); }, 3000); } // 转换函数 function convertText() { const text = input.value; if (!text.trim()) { showStatus('请输入需要转换的内容', true); return; } // 首先处理[[code]]块 let result = text; // 正则表达式匹配[[code]]块并处理其中的每一行 const codeBlockRegex = /\[\[code\]\]([\s\S]*?)\[\[\/code\]\]/g; result = result.replace(codeBlockRegex, (match, content) => { // 替换开始标签 const startTag = '[[div style="font-family: \'Consolas\', \'Noto Sans SC\', \'微软雅黑\', monospace; border: none; background: #132023; color: #eaedee; box-shadow: inset 0.3rem 0rem #64a8a3;"]]'; // 处理内容中的每一行，前后加上@@ const lines = content.split('\n'); const processedLines = lines.map(line => { // 保留空行，只处理非空行 return line.trim() === '' ? line : `@@${line}@@`; }); const processedContent = processedLines.join('\n'); // 替换结束标签 const endTag = '[[/div]]'; return `${startTag}\n${processedContent}\n${endTag}`; }); // 处理{{}}等宽文本 const inlineCodeRegex = /{{(.*?)}}/g; result = result.replace(inlineCodeRegex, (match, content) => { return ' [[span style=" font-family: \'Consolas\', monospace;background: #eff2f2;border-radius: 0.4rem;line-height: 1.3rem;display: inline-block;"]]@@ ' + content + ' @@[[/span]] '; }); output.value = result; showStatus('转换完成'); } // 复制结果到剪贴板 function copyToClipboard() { if (!output.value.trim()) { showStatus('没有可复制的内容', true); return; } output.select(); document.execCommand('copy'); showStatus('已复制到剪贴板'); } // 清空输入和输出 function clearAll() { input.value = ''; output.value = ''; input.focus(); showStatus('已清空内容'); } // 事件监听 convertBtn.addEventListener('click', convertText); copyBtn.addEventListener('click', copyToClipboard); clearBtn.addEventListener('click', clearAll); // 支持按Enter键转换（Shift+Enter换行） input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); convertText(); } }); // 初始聚焦到输入框 input.focus(); </script> </body> </html>