新建.pug文件白底黑字是因为WebStorm未将其关联至Pug文件类型，需在Settings→Editor→File Types中添加Pug类型并注册*.pug模式，否则默认按纯文本渲染，导致语法高亮、缩进、Emmet全部失效。
WebStorm 默认不识别 .pug 文件，必须手动关联文件类型，否则连基础高亮都不会有。
为什么新建的 .pug 文件全是白底黑字？
这不是插件没装或版本问题，而是 WebStorm 根本没把 .pug 当作 Pug 语言处理。它默认按纯文本渲染，语法高亮、缩进、Emmet 都不会生效。
- 打开
Settings/Preferences → Editor → File Types - 在左侧列表里找
Pug—— 如果没有，点右上角+，选Add Recognized File Type，再从列表里选Pug - 在右侧
Registered Patterns里加一行：*.pug（注意星号和点不能漏） - 确认没有其他文件类型（比如
Text或HTML）也注册了*.pug，否则会冲突
.pug 文件高亮颜色怎么调？
高亮颜色由「编辑器配色方案」控制，但 Pug 的语法元素（如标签名、属性、插值）默认复用 HTML 或通用规则，容易看不清。
- 进
Settings/Preferences → Editor → Color Scheme → Pug（不是 HTML，不是 General） - 重点调这几项：
Tag name（设为深蓝或青色）、Attribute name（稍浅于 tag）、Interpolation（即#{...}或=后面的内容，建议设为橙色） - 如果
Pug节点下为空或不可点，说明你还没完成上一步的文件类型关联 - 改完别忘点
Apply，然后新开一个.pug文件验证 —— 写p(class="btn") #{title}看各部分是否分色
用了 include 或 extends 还是标红？
这通常不是高亮问题，而是 WebStorm 没法解析路径或找不到被引用文件，导致语义分析失败，进而影响高亮连带效果。
- 确保
include路径是相对当前文件的，且目标文件存在（比如include ./mixins/button对应mixins/button.pug） - 检查项目根目录是否有
pug.config.js或.pugrc；如果有，WebStorm 会尝试读取其中的basedir或includes配置 - 若路径含变量（如
include #{partialPath}），WebStorm 无法静态分析，标红属正常，不影响编译 - 重启 WebStorm 或执行
File → Reload project from disk可刷新路径索引
真正容易被忽略的是：Pug 高亮依赖文件类型 + 配色方案 + 路径可解析三者同时成立。少一个，就可能看着像“没高亮”，其实只是某一层断了链。
