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

问题

I would line to apply a few simple changes to the appearance of my IPython/IHaskell/Jupyter Notebooks, such as

rendered_html :link {
    text-decoration: none;
}

but I can't figure out how to do this. I've tried many of the solutions I've found by searching, e.g., placing CSS in

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

but none have any effect, and I suspect that given the recent changes to the Notebook architecture, the method for accomplishing this has changed and that the instructions I'm finding are out of date.

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

OS X 10.10.4; Xcode 6.4; CLT: 6.4.0.0.1; Clang: 6.1; Python Python 2.7.10 (Homebrew); IHaskell 0.6.4.1, IPython 3.0.0 (answers for 4.0.0 and Jupiter 4.0 also appreciated, as I will upgrade soon).

回答1:

I think the path to your custom.css should be:

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

custom folder instead of css folder.

回答2:

To add custom CSS to a particular notebook you can use HTML. Add and execute a regular Python code cell with the following content:

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

Alternatively (thanks @abalter) use the %%html cell magic:

%%html
<style>
// add your CSS styling here
</style>

回答3:

Starting Jupyter / IPython 4.1, the custom folder location has changed to ~/.jupyter/custom/. So place your custom.css and custom.js like this:

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

Works for me that way. Credits goes to Liang2

Edit:

If you are missing ~/.jupyter folder, you can use jupyter notebook --generate-config command to generate the folder.

回答4:

Per the suggested documentation, I downloaded Anaconda3 first and from within Anaconda Navigator - Jupyter 5.0 Notebook is one of several pre-built options. I found my CSS file at this location.

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

回答5:

Here is what I did.

From http://jupyter.readthedocs.io/en/latest/projects/jupyter-directories.html I found out that you can change the config directory by setting the JUPYTER_CONFIG_DIR env var, then I run jupyter like:

JUPYTER_CONFIG_DIR=./jupyter/ jupyter notebook

My jupyter dir in current dir has the following structure:

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

回答6:

I am running Jupyter on Google Cloud Platform using Tensorflow Docker image and it was located at /usr/local/lib/python2.7/dist-packages/notebook/static/custom/. In Any case, you can find it by searching for it.

回答7:

According to Jupyter documentation custom.css should be put into the default_profile/static/custom folders.

You will find the location of your default profile by running in a Jupyter notebook cell:

import jupyter_core
jupyter_core.paths.jupyter_config_dir()

Which gave me:

'/home/sergey/.jupyter'

Afterwards, in .jupyter folder create directory structure like:

static
└── custom
    └── custom.css

As you see the desired structure is ~/.jupyter/static/custom/custom.css

This worked for me in Ubuntu 18.04 and latest Jupyter (October 2018)

回答8:

For base conda environment I found it here: ~/Programs/Anaconda3/lib/python3.6/site-packages/notebook/static/custom

For custom conda environment I found it here: ~/Programs/Anaconda3/envs/[environment name]/lib/python3.6/site-packages/notebook/static/custom

Works under Ubuntu 18.04, conda 4.6.8.

回答9:

I found a nice solution here: https://martinapugliese.github.io/jupyter-customise/

I needed to add this however:

<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)

来源：https://stackoverflow.com/questions/32156248/how-do-i-set-custom-css-for-my-ipython-ihaskell-jupyter-notebook

标签

ipython

jupyter

ihaskell