Jupyter Notebook深色主题导出HTML文件后渲染不符预期问题咨询

我踩过好几次这个坑，核心原因很简单：你在浏览器里看到的深色主题是Jupyter动态加载的样式，但默认导出HTML时，这些主题样式不会被完整打包到静态HTML文件里，就导致了背景是浅色、代码块却留着深色的割裂效果。下面给你几个靠谱的解决办法：

方法1：导出时直接指定深色主题（最快捷） #

不用改配置，直接用命令行导出就能搞定：

1. 打开终端（或命令提示符）
2. 运行以下命令，把your_notebook.ipynb换成你的笔记本文件名：

jupyter nbconvert --to html --theme dark your_notebook.ipynb

这个命令会强制导出的HTML使用Jupyter内置的深色主题，和你在浏览器里看到的效果基本一致。

如果习惯在Notebook界面里导出，有些新版本的Jupyter在「File > Download as > HTML」的选项里会让你选择主题，要是能找到就直接选深色就行——不过命令行的方式更稳定，不会受版本差异影响。

方法2：修改Jupyter配置，默认导出深色主题 #

要是你经常需要导出深色主题的HTML，可以把默认设置改了，省得每次都输命令：

1. 先在终端里生成Jupyter的配置文件（如果还没生成过的话）：

jupyter notebook --generate-config

2. 找到生成的配置文件（一般在~/.jupyter/jupyter_notebook_config.py，Windows用户在C:\Users\你的用户名\.jupyter\里），用文本编辑器打开
3. 在文件里搜索NbConvertApp.theme，找到后把注释去掉，改成：

c.NbConvertApp.theme = 'dark'

4. 保存配置文件，重启Jupyter Notebook，之后再导出HTML就默认是深色主题了。

方法3：手动补全HTML样式（临时应急） #

如果上面的方法都不生效（比如用了第三方自定义主题），可以手动修改导出后的HTML文件，补上匹配的样式：

1. 用文本编辑器打开导出的HTML文件
2. 找到<head>标签，在里面插入一段自定义CSS：

<style>
/* 全局背景和文字颜色匹配深色主题 */
body {
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
}
/* 让代码块背景和全局一致 */
pre, .CodeMirror {
    background-color: #1e1e1e !important;
}
/* 调整其他元素的样式（比如标题、链接），根据你的主题微调 */
h1, h2, h3 {
    color: #cccccc !important;
}
a {
    color: #569cd6 !important;
}
</style>

3. 保存文件后再打开，就能看到和浏览器里一致的深色效果了——这个方法适合临时改单个文件，要是批量导出还是用前两种方法更高效。

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