48

我想对我的 IPython/IHaskell/Jupyter Notebooks 的外观进行一些简单的更改，例如：

    rendered_html :link {
        text-decoration: none;
    }

但是，我无法弄清楚如何做到这一点。我已经尝试了许多通过搜索找到的解决方案，例如，将 CSS 放置在：

~/.ipython/profile_default/static/css/custom.css

但是没有任何效果，而且我怀疑，鉴于最近对笔记本架构的更改，完成此操作的方法已经更改，并且我发现的说明已经过时。

如何为我的 IPython/IHaskell/Jupyter Notebook 设置自定义 CSS？

OS X 10.10.4；Xcode 6.4；CLT：6.4.0.0.1；铿锵声：6.1；Python Python 2.7.10（自制）；IHaskell 0.6.4.1，IPython 3.0.0（4.0.0 和 Jupiter 4.0 的答案也很感激，因为我很快就会升级）。

4

13 回答 13

85

要将自定义 CSS 添加到特定笔记本，您可以使用HTML. 添加并执行具有以下内容的常规 Python 代码单元：

from IPython.core.display import HTML
HTML("""
<style>
// add your CSS styling here
</style>
""")

或者（感谢@abalter）使用%%html细胞魔法：

%%html
<style>
// add your CSS styling here
</style>
于 2015-11-06T15:58:46.373 回答
65

从 Jupyter / IPython 4.1 开始，自定义文件夹位置已更改为~/.jupyter/custom/. 所以把你的custom.css和custom.js像这样：

~/.jupyter/custom/custom.css
~/.jupyter/custom/custom.js

这样对我有用。归功于Liang2

编辑：

如果缺少~/.jupyter文件夹，可以使用jupyter notebook --generate-config命令生成文件夹。

于 2016-01-12T11:22:36.680 回答
24

我认为您的路径custom.css应该是：

~/.ipython/profile_default/static/custom/custom.css

custom文件夹而不是css文件夹。

于 2015-08-22T16:51:09.417 回答
18

这就是我所做的。

从https://jupyter.readthedocs.io/en/latest/use/jupyter-directories.html#envvar-JUPYTER_CONFIG_DIR我发现您可以通过设置JUPYTER_CONFIG_DIR环境变量来更改配置目录，然后我运行 jupyter 如下：

JUPYTER_CONFIG_DIR=./jupyter/ jupyter notebook

我在当前目录中的 jupyter 目录具有以下结构：

朱皮特/
- 风俗/
  - 自定义.css
  - 自定义.js
于 2017-01-10T18:54:39.943 回答
8

截至 2021 年，Jupyter 4.7、Ipython 7，以下位置对我有用：

/home/$USER/.jupyter/custom/custom.css

老答案：

根据 Jupyter 文档custom.css应该放入default_profile/static/custom文件夹中。

通过在 Jupyter 笔记本单元格中运行，您将找到默认配置文件的位置：

import jupyter_core
jupyter_core.paths.jupyter_config_dir()

这给了我：

'/home/sergey/.jupyter'

之后，在.jupyter文件夹中创建目录结构，如：

static
└── custom
    └── custom.css

如您所见，所需的结构是~/.jupyter/static/custom/custom.css

这在 Ubuntu 18.04 和最新的 Jupyter（2018 年 10 月）中对我有用

于 2018-10-15T12:15:11.923 回答
6

根据建议的文档，我首先从 Anaconda Navigator 中下载了 Anaconda3 - Jupyter 5.0 Notebook 是几个预建选项之一。我在这个位置找到了我的 CSS 文件。

C:\Users\YourUsername\Anaconda3\Lib\site-packages\notebook\static\custom\custom.css

于 2017-09-12T18:04:09.887 回答
5

对于基本 conda 环境，我在这里找到了它：~/Programs/Anaconda3/lib/python3.6/site-packages/notebook/static/custom

对于自定义 conda 环境，我在这里找到了它：~/Programs/Anaconda3/envs/[environment name]/lib/python3.6/site-packages/notebook/static/custom

在 Ubuntu 18.04、conda 4.6.8 下工作。

于 2019-03-23T14:06:14.420 回答
4

我在这里找到了一个不错的解决方案： https ://martinapugliese.github.io/jupyter-customise/

但是我需要添加这个：

<style>..</style>

from IPython.core.display import HTML

def _set_css_style(css_file_path):
   """
   Read the custom CSS file and load it into Jupyter.
   Pass the file path to the CSS file.
   """

   styles = open(css_file_path, "r").read()
   s = '<style>%s</style>' % styles     
   return HTML(s)
于 2018-05-03T07:56:32.637 回答
2

我正在使用 Tensorflow Docker 映像在 Google Cloud Platform 上运行 Jupyter，它位于/usr/local/lib/python2.7/dist-packages/notebook/static/custom/. 无论如何，您都可以通过搜索找到它。

于 2016-04-29T07:39:27.770 回答
2

由于声誉无法添加评论，因此我将发布作为答案。

当/custom/custom.css我生成配置文件时停止为我工作，但如果有人也遇到这个问题，解决方案是取消注释文件c.NotebookApp.extra_static_paths = []中的行jupyter_notebook_config.py并添加“./custom/” - 或您为自定义 css 选择的任何路径 -括号内。

PS：操作系统是 Linux Manjaro 5.12，Jupyter Notebook 版本是 6.3.0。

于 2021-06-08T19:29:58.803 回答
1

对于 Windows

C:\Users\<username>\.jupyter\custom\custom.css

以上将覆盖默认位置：在site-packages https://github.com/jupyter/jupyter/issues/295

于 2020-11-06T10:45:34.623 回答
0

如果您通过 PIP 而不是 Anaconda 安装它，那么它将位于此文件夹中
C:\Users\<user-name>\AppData\Local\Programs\Python\Python37\Lib\site-packages\notebook\static\custom
从这里您可以找到该custom.css文件并对其进行编辑以反映更改。您还将在custom.js那里拥有该文件。

于 2020-10-12T09:38:24.177 回答
-1

乌布努图 18.04

文件夹 ~/venv/lib/python3.8/site-packages/notebook/static/custom

venv 是虚拟环境名称，因此该位置相对于您的环境位置。

这里有一个占位符文件“custom.css”。用你自己的 css 覆盖它。

任何安装了 Conda 的机器

C:\Users******.conda\envs\py37\lib\site-packages\notebook\static\custom

使用相对于 .conda 的路径。我的环境名称是 py37

将您的自定义 css 放在此处的 custom.css 文件中。

重新加载 jupyter 笔记本。

于 2021-03-16T09:06:53.207 回答