如何在Visual Studio Code中显示所有Python单元格的边界分隔线？

你之前使用的notebook.*相关配置仅作用于VS Code内置的交互式Notebook窗口，普通.py文件中#%%生成的类Jupyter单元格是Python扩展提供的独立功能，需按以下方法配置：

一、始终显示所有单元格分隔线 #

方案1：修改原生边框（效果最优） #

• 首先安装VS Code扩展 Custom CSS and JS Loader
• 新建本地CSS文件（例如vscode-custom.css），写入以下规则，可自行调整色值匹配你的编辑器主题：

/* 始终显示所有Python单元格上粗边界 */
.monaco-editor .python-cell-border-top {
    border-top: 2px solid #569cd6 !important;
    opacity: 1 !important;
}
/* 始终显示所有Python单元格下细边界 */
.monaco-editor .python-cell-border-bottom {
    border-bottom: 1px solid #569cd660 !important;
    opacity: 1 !important;
}

• 打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索Custom CSS: Urls，添加刚才创建的CSS文件的绝对路径（Windows格式示例：file:///C:/Users/xxx/vscode-custom.css，Mac/Linux格式示例：file:///Users/xxx/vscode-custom.css）
• 按下Ctrl+Shift+P/Cmd+Shift+P执行命令Reload Custom CSS and JS，重启VS Code后生效

方案2：无需额外扩展（替代方案） #

如果不想安装自定义CSS扩展，可通过高亮#%%行模拟分隔线效果，安装Highlight扩展后在settings.json中添加以下配置：

"highlight.regexes": {
    "(^#%%.*$)": {
        "decorations": [
            {
                "backgroundColor": "#2b4b6b",
                "isWholeLine": true
            }
        ]
    }
}

二、自定义单元格顶部操作栏样式 #

Run Cell | Run Above | Debug Cell属于编辑器的CodeLens组件，同样可以通过上述自定义CSS注入的方式修改样式，示例规则如下：

/* 操作栏整体容器样式 */
.monaco-editor .codeLens-decoration {
    background: #1e1e1e80 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
}
/* 操作按钮文字样式 */
.monaco-editor .codeLens-decoration .codicon {
    color: #4ec9b0 !important;
    margin-right: 3px !important;
}
.monaco-editor .codeLens-decoration a {
    color: #9cdcfe !important;
}
/* 按钮之间的分隔符样式 */
.monaco-editor .codeLens-decoration .codicon-separator {
    color: #666666 !important;
    margin: 0 4px !important;
}

修改CSS后重新加载自定义配置即可生效。

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