sql代码框字体小、截断、颜色难辨及导出错位问题，可通过设置font-size/line-height、overflow-x:auto/max-width:100%、强制暗色模式关键词颜色、避免innerhtml清空及异步高亮时机优化解决。

sql代码框字体太小看不清怎么办

导出预览界面的sql代码框默认用等宽字体但字号偏小、行高紧凑，长时间盯容易眼疲劳。根本原因是前端未显式设置 font-size 和 line-height，依赖浏览器默认或框架全局样式覆盖。

• 优先在控制台定位到代码容器元素，通常是 <pre class="brush:php;toolbar:false;"></pre> 或带 class="sql-preview" 的 <div> <li>直接加内联样式最稳妥：<code>style="font-size: 14px; line-height: 1.6; tab-size: 4;"（tab-size 能让缩进更清晰）
• 避免用 em 或百分比单位，防止父级字体缩放干扰；px 或 rem 更可控
• Chrome DevTools 里右键“Edit as HTML”，临时加样式验证效果，确认后再写入源码

代码框无法水平滚动导致SQL被截断

常见于长 WHERE 条件或嵌套子查询，white-space: pre 默认不换行，但容器没设 overflow-x: auto 就会硬截断。

• 必须同时设置：white-space: pre; overflow-x: auto; max-width: 100%;
• 别漏掉 max-width: 100%——否则滚动条可能不出现，尤其在 flex 布局里
• 如果用了 code 标签包裹 SQL，记得给 code 加 display: block，否则 overflow 无效
• 测试时故意输一长串无空格的字符串（如 SELECT * FROM users WHERE id IN (1,2,3,...)），确认能否拖动查看

深色模式下SQL关键字颜色发灰难分辨

很多系统用 CSS 变量做主题切换，但 SQL 高亮常依赖第三方库（如 highlight.js）或手写正则，没适配暗色背景下的对比度。

• 检查高亮后生成的 <span class="hljs-keyword"></span> 是否被暗色主题的 color 覆盖
• 强制覆盖：在暗色模式 CSS 块里加 .hljs-keyword { color: #ff79c6 !important; }（用亮粉/青蓝系，避开纯白——反光刺眼）
• 别只调 keyword，.hljs-string、.hljs-number 同样要测，特别是 NULL 这种常被当 keyword 或 constant 处理的值
• 用系统级“强制色彩滤镜”（Windows 高对比度 / macOS Color Filters）再测一遍，确保可访问性

导出按钮点击后SQL框突然变窄或错位

这是最隐蔽的问题：导出逻辑触发了 DOM 重排，比如清空容器、插入 loading 提示、或动态加载高亮脚本，导致样式计算异常。

• 在导出函数开头加 getComputedStyle(codeContainer).width 打印宽度，确认是否突变
• 避免在导出流程中直接 innerHTML = '' 清空代码框——改用 textContent = ''，保留原有样式节点
• 如果用了 Prism.highlightElement() 等异步高亮，确保它在 DOM 稳定后再执行，而不是在 click 回调里立刻调用
• 导出前手动触发一次 codeContainer.style.width = codeContainer.offsetWidth + 'px'，锁住宽度

真正麻烦的不是改样式，而是导出动作本身会干扰渲染队列。多试几次，观察是首次点击出问题，还是连续点击后才错位——这能帮你锁定是状态残留还是竞态条件。