SQL代码框字体小、截断、颜色难辨及导出错位问题，可通过设置font-size/line-height、overflow-x:auto/max-width:100%、强制暗色模式关键词颜色、避免innerHTML清空及异步高亮时机优化解决。
SQL代码框字体太小看不清怎么办
导出预览界面的sql代码框默认用等宽字体但字号偏小、行高紧凑，长时间盯容易眼疲劳。根本原因是前端未显式设置 font-size 和 line-height，依赖浏览器默认或框架全局样式覆盖。
- 优先在控制台定位到代码容器元素，通常是
<pre>或带class="sql-preview"的<div> - 直接加内联样式最稳妥：
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">是否被暗色主题的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'，锁住宽度
真正麻烦的不是改样式，而是导出动作本身会干扰渲染队列。多试几次，观察是首次点击出问题，还是连续点击后才错位——这能帮你锁定是状态残留还是竞态条件。
