Customizing the CSS style in the notebook_IPython Interactive Computing and Visualization Cookbook-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

Customizing the CSS style in the notebook

In this recipe, we show how to customize the CSS in the notebook interface and in an exported HTML notebook.

Getting ready

You are expected to know a bit of CSS3 for this recipe. You can find many tutorials online (see the references at the end of this recipe).

You also need to download the Notebook dataset from the book's website (http://ipython-books.github.io), and extract it in the current directory.

How to do it...

First, we create a new IPython profile to avoid cluttering our default profile as follows:
```
In [1]: !ipython profile create custom_css
```

In Python, we retrieve the path to this profile (~/.ipython) and to the custom.css file (empty by default).

In [2]: dir = !ipython locate profile custom_css
        dir = dir[0]
In [3]: import os
        csspath = os.path.realpath(os.path.join(
                    dir, 'static/custom/custom.css'))
In [4]: csspath
Out[4]: '~\.ipython\profile_custom_css\static\
                                       custom\custom.css'

We can now edit this file here. We change the background color, the font size of code cells, the border of some cells, and we highlight the selected cells in edit mode.

In [5]: %%writefile {csspath}
        
        body {
            /* Background color for the whole notebook. */
            background-color: #f0f0f0;
        }
        
        /* Level 1 headers. */
        h1 {
            text-align: right;
            color: red;
        }
        
        /* Code cells. */
        div.input_area > div.highlight > pre {
            font-size: 10px;
        }
        
        /* Output images. */
        div.output_area img {
            border: 3px #ababab solid;
            border-radius: 8px;
        }
        
        /* Selected cells. */
        div.cell.selected {
            border: 3px #ababab solid;
            background-color: #ddd;
        }
        
        /* Code cells in edit mode. */
        div.cell.edit_mode {
            border: 3px red solid;
            background-color: #faa;
        }
Overwriting C:\Users\Cyrille\.ipython\profile_custom_css\static\custom\custom.css

Opening a notebook with the custom_css profile (with the ipython notebook --profile=custom_css command) leads to a custom style as follows:

Custom CSS in the interactive notebook interface

We can also use this style sheet with nbconvert. We just have to convert a notebook to a static HTML document, and copy the custom.css file in the current directory. Here, we use a test notebook that has been downloaded from the book's website (see Getting ready):
```
In [6]: !cp {csspath} custom.css
        !ipython nbconvert --to html data/test.ipynb
[NbConvertApp] Writing 187617 bytes to test.html
```

Here is what this HTML document looks like:

In [7]: from IPython.display import IFrame
        IFrame('test.html', 600, 650)

There's more...

Here are a few tutorials and references about CSS:

CSS tutorial on w3schools, at www.w3schools.com/css/DEFAULT.asp
CSS tutorial on Mozilla Developer Network, at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
Blog post by Matthias Bussonnier about how to customize the notebook CSS, at http://nbviewer.ipython.org/github/Carreau/posts/blob/master/Blog1.ipynb