Anaconda jupyter notebook 简单更改前端样式

最新推荐文章于 2025-07-18 20:26:36 发布

原创最新推荐文章于 2025-07-18 20:26:36 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jupyter #notebook

Python3学习同时被 2 个专栏收录

4 篇文章

订阅专栏

Anaconda

1 篇文章

订阅专栏

本文介绍了如何改变Jupyter Notebook的前端样式，包括通过安装主题和直接编辑CSS样式文件来调整注释字体和大小。重点讲述了直接编辑custom.css文件的方法，详细说明了查找和修改样式的过程，并给出了注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Anaconda jupyter notebook 简单更改前端样式

方案一：关于notebook的主题

网上有关于notebook的主题可以安装，直接搜索“jupyter-themes”可以找到很多教程。甚至Chrome还有一款这个的插件：在这里插入图片描述

但本文不是讨论这个的，因为，我也试了这些主题，背景是黑色，固然保护眼睛，但某些地方，请看下图（其中
的名为oceans16的主题）：
在这里插入图片描述
用matplotlib画图感觉眼睛都要瞎，坐标轴都快看不清了，可能是我才用两分钟，还不会调吧。（据说用于pandas效果不错。）

更新：这个图片的处理，可以用方案二中的办法，给图片添加背景颜色（如白色），就不会有看不清这种问题了。
再更新：可以给画图前指定颜色，示例代码如下：
plt.figure(facecolor='white')

但，其实我就是想改变个注释的样式啊，默认注释是斜体，字又小，不方便看。默认注释效果如下：
在这里插入图片描述
说实话，要不是这个主题包有的地方不完美，我就用这个主题包了，毕竟保护眼睛还是很重要滴。

通过这个主题包，我发现了可以修改CSS样式表的地方，一下就实现了我的小小心愿。

方案二：直接改变notebook前端样式

这部分才是本文的主要内容

第一步：找到可以编写自定义样式的文件

路径是：C:\Users\win\.jupyter\custom
注意：上述“win”是我的用户名，请换成自己电脑里实际的用户名，若不知道是哪个用户名，可以都找一下。
（我的电脑是Win10，其他的系统的路径也许可能不太一致）

如果还是找不到，可以尝试在anaconda prompt中输入这个命令
jupyter notebook --generate-config
这个命令可以自动生成notebook的配置文件.

这个文件夹内容如下：
在这里插入图片描述
如果没有这些文件，或者没有custom这个文件夹，可以尝试手动新建这些文件，毕竟这些文件内容都是空的。

其中那个custom.css就是我们要可以写自定义CSS样式的地方

第二步，找到要修改样式的地方

比如说，我要调整注释的字体。
打开一个notebook，打开一段代码，按F12，找到对应于注释地方的HTML文本。如下：
在这里插入图片描述
如果对前端不太了解，也没有很大关系，学会使用如图椭圆框中的箭头按钮，再点击网页上某个位置，即可快速找到HTML文本中对应的位置。
如上图，我点击了红框中的注释，右边就显示了代码的位置。此时若将鼠标放置于右边这段HTML代码之上，则左边网页相应的位置会显示蓝色。

这段文本中的cm-comment可以于重定义样式
<span class="cm-comment">#! -*- coding:UTF-8 -*-</span>

第三步，编辑`custom.css`文件

用文本编辑器打开这个文件即可。
如果文件中有内容最好全部删掉，不放心删掉可以先备份这个文件。
调整注释的字体样式的代码如下（将字体设置为正常）：
.cm-comment{ font-style:normal !important; }
在这里插入图片描述

写入完毕之后保存。

第四步，查看是否更改成功

回到网页上，刷新一下网页。结果如下：
在这里插入图片描述
字体果然变正常了（不再是斜体），但是还就是有点小哈。

第五步，添加其他样式

由于这里只提供了一个自定义的小例子，所以，更多效果还是请您自己调试。
如果您学过前端，那像这样操作起来没问题。但是一定要记得添加!important。

如果不太了解前端，却想修改其他内容，例如想修改注释的字体大小，直接搜索“css 字体大小” ，有一个w3school网站个人认为不错。可以在里面找到相关的内容，也可以在线DIY。
在这里插入图片描述
比如，其中有一段这样的内容：

然后，把代码加到custom.css文件中就可以。像这样：
在这里插入图片描述

保存该文件后，刷新一下网页，效果像这样：
在这里插入图片描述
比代码字体还要大了有木有，哈哈哈，有点喧宾夺主的赶脚。

一些简单的效果可以这样改一改，多了的话，就比较复杂，比较麻烦，我也不确定这个文件能够实现。

注意事项

custom.css文件中，请勿出现中文等字符，否则，使用download as html等菜单时，会出现nbconvert failed: 'gbk' codec can't decode byte 0xaa in position 202: illegal multibyte sequence错误，导致这些菜单无法正常使用。