WebStorm 设置代码注入块颜色

在 JS 里写模板字符串嵌 HTML、在 Vue 单文件组件里写 <style>、或者用 styled-components 写 CSS，WebStorm 都会识别出这是「注入的语言片段」（injected language fragment），然后给这段内容铺一层浅色背景，提示你这里的语法和外层不是一套。

这层背景色本意是好的，但在深色主题下它经常和代码前景色打架，看久了很累眼；有人则相反，希望它更明显一点好区分。这篇记的就是改这层背景色的位置。

设置位置

打开设置面板，进入 Editor → Color Scheme → General，在右侧的树里展开 Code 分组，找到 Injected language fragment。选中它之后，右边会出现三个可调项：

1. Foreground：注入片段里文字本身的颜色，一般不用改，交给各语言自己的配色更合适。
2. Background：就是那层背景底色，想取消高亮直接把这个勾去掉，想调淡就换一个更接近编辑器底色的值。
3. Effects：下划线、边框之类的额外效果，用它替代背景色也是个思路，干扰比整块底色小。

下图是这个配色项在 Color Scheme 面板里的位置，注意看左侧树的层级 General → Code → Injected language fragment，以及右侧 Background 那一行的取色框。

注意事项

1. 配色方案是跟着主题走的，改之前 WebStorm 会提示你基于当前方案创建一个副本，照着做就行，不然换主题时改动会丢。
2. 改完只影响当前这套 scheme，切到别的主题需要重新改一遍。想跨机器同步就用 File → Manage IDE Settings → Settings Sync。
3. 如果你想彻底不要这个高亮，去掉 Background 勾选比把颜色设成和背景一样更干净，后者在选中行、断点行等叠加高亮的场景下还是会露出来。