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

Question

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

    rendered_html :link {
        text-decoration: none;
    }

但是，我不知道该怎么做。我已经尝试了很多通过搜索找到的解决方案，例如，将 CSS 放在：

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

但是 none 有任何影响，而且我怀疑，考虑到最近对 Notebook 架构的更改，实现此目的的方法已经改变，而且我找到的说明已经过时了。

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

OS X 10.10.4； Xcode6.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 的答案也很受欢迎，因为我会尽快升级）。

Answer 1

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

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

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

Answer 2

要将自定义 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>

Answer 3

启动 Jupyter / IPython 4.1，自定义文件夹位置已更改为 ~/.jupyter/custom/。所以将你的 custom.css 和 custom.js 像这样放置：

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

那样对我有用。学分转到 Liang2

编辑：

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

Answer 4

我是运行 Google Cloud Platform 上的 Jupyter，使用 Tensorflow Docker 图像，它位于 /usr/local/lib/python2.7/dist-packages/notebook/static/custom/。 Any case，搜索一下就可以找到。

Answer 5

这是我所做的。

从 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 目录具有以下结构：

jupyter/
- custom/
  - custom.css
  - custom.js

Answer 6

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

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

Answer 7

我在这里找到了一个很好的解决方案： 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)

Answer 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 月）中对我有用

Answer 9

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

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

在 Ubuntu 18.04、conda 4.6.8 下工作。

Answer 10

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

Answer 11

对于Windows

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

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

Answer 12

Ubuntu 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 notebook。

Answer 13

由于声誉原因无法添加评论，所以我将 post 作为答案。

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

P.S.: OS 是 Linux Manjaro 5.12 和 Jupyter Notebook 版本是 6.3.0.

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

How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?

ipython

ihaskell

jupyter