VSCode中Jupyter Notebook自定义Markdown样式失效求助

核心原因 #

VSCode的Jupyter插件并不沿用传统Jupyter Notebook的.jupyter/custom/custom.css路径配置，它有独立的自定义CSS设置项，同时渲染引擎的DOM结构也和原生Jupyter不同，导致旧方法失效。

可行方案 #

1. 配置VSCode的Jupyter自定义CSS路径

• 打开VSCode设置（快捷键：Cmd+, / Ctrl+,）
• 在搜索框输入 Jupyter: Custom CSS
• 在输入框中填入你的custom.css文件绝对路径，例如：/Users/user_name/.jupyter/custom/custom.css
• 重启VSCode后，重新打开Jupyter Notebook验证样式是否生效

2. 调整CSS选择器优先级

如果配置路径后样式仍未生效，大概率是VSCode内置样式优先级更高，需要修改CSS选择器，针对VSCode Jupyter的DOM结构编写更具体的规则：

/* 针对VSCode Jupyter的Markdown标题 */
.jp-MarkdownHeading h1 {
    color: #00252b;
    font-size: 3em;
    font-weight: bold;
    font-style: italic;
}

.jp-MarkdownHeading h2 {
    color: indianred;
    font-size: 2.75em;
    font-weight: bold;
    font-style: italic;
}

.jp-MarkdownHeading h3 {
    color: #005287;
    font-size: 2.5em;
    font-weight: bold;
    font-style: italic;
}

.jp-MarkdownHeading h4 {
    color: #00A86B;
    font-size: 2.25em;
    font-weight: bold;
    font-style: italic;
}

.jp-MarkdownHeading h5 {
    color: #ffb66f;
    font-size: 2em;
    font-weight: bold;
    font-style: italic;
}

.jp-MarkdownHeading h6 {
    color: maroon;
    font-size: 1.75em;
    font-weight: bold;
    font-style: italic;
}

3. 备选：使用内联样式（临时场景）

如果只需要针对单个Notebook的部分标题自定义，可以直接用Markdown内联HTML样式：

<h1 style="color:#00252b; font-size:3em; font-weight:bold; font-style:italic;">自定义标题</h1>

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