VSCode中Jupyter Notebook单元格输出颜色自定义方法咨询

目前VSCode的内置设置里，针对Jupyter Notebook输出区域的搜索匹配高亮，有几个专门的配置项（需确保VSCode及Jupyter扩展为最新版本），可以直接在settings.json中配置：

• 输出文本的搜索匹配背景色：notebook.outputText.findMatchBackground
• 输出文本的搜索匹配高亮背景色：notebook.outputText.findMatchHighlightBackground
• 输出文本的搜索匹配高亮边框色：notebook.outputText.findMatchHighlightBorder

配置示例：

"workbench.colorCustomizations": {
  "notebook.outputText.findMatchBackground": "#ffd70080",
  "notebook.outputText.findMatchHighlightBackground": "#90ee9080",
  "notebook.outputText.findMatchHighlightBorder": "#228b22"
}

如果上述内置设置无法满足需求（比如需要更复杂的样式），可以通过自定义CSS实现：

1. 安装vscode_custom_css扩展
2. 在用户设置settings.json中添加自定义CSS路径：

   "vscode_custom_css.imports": [
     "file:///Users/yourname/custom-vscode.css" // 替换为你的实际路径
   ]
   

3. 创建custom-vscode.css文件，添加针对输出区域的样式：

   /* 输出区域的搜索匹配样式 */
   .jp-OutputArea-output .cm-searchMatch {
     background-color: #ffd70080 !important;
     border-radius: 3px;
   }
   .jp-OutputArea-output .cm-searchMatchHighlight {
     background-color: #90ee9080 !important;
   }
   

4. 执行命令面板中的Enable Custom CSS and JS，重启VSCode生效。

注意：自定义CSS可能会在VSCode版本更新后失效，需重新验证样式选择器。

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