直接修改custom.css是最稳定的方式,jupyter-themes切主题本质也是向该文件写入编译css;局部调整(如块引用背景色、单元格宽度)时,手动编辑custom.css更可控、不冲突,且需将自定义样式置于文件末尾并慎用!important确保优先级。

直接改 custom.css 是最稳定的方式
用 jupyter-themes 切主题本质也是往 custom.css 写入编译好的 CSS,但如果你只想局部调整(比如改块引用背景色、加自动换行、调宽单元格),绕过主题工具直接编辑文件反而更可控、不冲突。
先找到你的 custom.css 路径:
Linux/macOS 运行 jupyter --paths,看输出里 config 下的 custom 目录;
Windows 通常是 C:\Users\{用户名}\.jupyter\custom\custom.css 或 C:\ProgramData\Anaconda3\Lib\site-packages\notebook\static\custom\custom.css(后者需管理员权限写入)。
- 文件不存在就手动创建目录和空文件
custom.css - 改完必须重启 Jupyter Notebook 进程,刷新页面才生效
- 浏览器缓存可能干扰效果,可强制刷新(Ctrl+Shift+R)或开无痕窗口验证
jt 命令应用主题时参数不叠加,必须一次性写全
很多人执行 jt -t oceans16,再补一句 jt -fs 14,结果字体没变——因为 jt 每次运行都会覆盖整个主题配置,第二次没带 -t 就等于重装默认主题。
- 所有定制参数必须合并在一条命令里,例如:
jt -t monokai -f fira -fs 13 -cellw 85% -ofs 10 -T -N -
-cellw值填90%和900px效果不同:百分比基于 viewport 宽度,px 是固定像素,响应式场景推荐用% - 加
-T显示 toolbar、-N显示 notebook 名称,漏掉就隐藏,没有“默认开启”这种中间态
自定义 CSS 优先级容易被主题覆盖,要用 !important 强制生效
比如你想让代码块行高统一为 1.4,但 jt 应用的 oceans16 主题里设了 line-height: 1.7,直接写 .CodeMirror-lines { line-height: 1.4; } 会被忽略。
- 必须加
!important:.CodeMirror-lines { line-height: 1.4 !important; } - 块引用(
blockquote)默认无背景色,想加浅灰底:blockquote { background-color: #f5f5f5 !important; padding: 8px 12px; } - 修改数学公式字号?
.MathJax .math { font-size: 110% !important; }—— 注意 MathJax 渲染后 DOM 结构较深,别只写span.math
主题切换后 custom.css 仍生效,但可能被覆盖或冲突
jt 安装主题时会把预编译 CSS 注入到 custom.css 开头,你手写的规则如果位置靠后、选择器不够具体,就会被覆盖。
- 建议把自定义样式写在
custom.css文件末尾,确保加载顺序靠后 - 避免用太泛的选择器如
div或*,优先用带 class 的,例如.output_subarea pre而不是pre - 某些主题(如
gruvboxd)对深色模式做了特殊处理,如果系统级开了暗色模式,CSS 里的color可能被@media (prefers-color-scheme: dark)覆盖,得单独加媒体查询
div.output_area 下内容是 JS 动态插入的,选中器得写全路径,且每次主题更新都可能微调 class 名。动手前最好用浏览器开发者工具「Elements」面板实时检查真实 class 和继承链。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











