Quarto RevealJS中{style="color:red"}样式渲染失效问题咨询

以下是导致本地预览正常但最终渲染后{style="color:red"}样式失效的核心原因：

• Quarto渲染管道的环境差异：本地预览（quarto preview）和最终渲染（quarto render）的处理逻辑不同。预览模式为提升开发效率，会保留原始内联style属性；而生产渲染时，Quarto会对HTML做优化处理（合并样式、清理冗余代码），过程中可能移除或覆盖内联样式。

• RevealJS主题样式的优先级覆盖：RevealJS默认主题或自定义主题中，针对幻灯片标题（如<h1>、<h2>）的CSS规则可能使用了更高优先级（比如带!important声明，或更具体的选择器如.reveal h1）。本地预览时主题样式加载顺序或优先级判断与最终渲染不同，内联样式暂时生效；但最终渲染完成后，主题高优先级规则完全应用，覆盖了内联的color样式。

• Quarto的HTML清理机制：生产渲染阶段Quarto可能启用HTML内容清理功能，过滤潜在不安全代码，其中就包括移除内联style属性。而本地预览模式为方便实时调试，未开启该清理机制，所以内联样式能正常显示。

• DOM结构的渲染差异：最终渲染时Quarto可能调整幻灯片DOM结构（如添加额外容器类、修改标题元素嵌套关系），导致原本内联style作用的元素被改变，或被新添加的父元素样式覆盖。

内容的提问来源于stack exchange，提问作者TarJae