|
| 1 | +{ |
| 2 | + "cells": [ |
| 3 | + { |
| 4 | + "cell_type": "markdown", |
| 5 | + "metadata": {}, |
| 6 | + "source": [ |
| 7 | + "> This is one of the 100 recipes of the [IPython Cookbook](http://ipython-books.github.io/), the definitive guide to high-performance scientific computing and data science in Python.\n" |
| 8 | + ] |
| 9 | + }, |
| 10 | + { |
| 11 | + "cell_type": "markdown", |
| 12 | + "metadata": {}, |
| 13 | + "source": [ |
| 14 | + "# 3.4. Customizing the CSS style in the notebook (IPython 3)" |
| 15 | + ] |
| 16 | + }, |
| 17 | + { |
| 18 | + "cell_type": "markdown", |
| 19 | + "metadata": {}, |
| 20 | + "source": [ |
| 21 | + "You will need the *CSS* dataset on the book's website. (http://ipython-books.github.com)\n", |
| 22 | + "\n", |
| 23 | + "You are expected to know a bit of CSS3 for this recipe. You can find many tutorials online (see references at the end of this recipe).\n", |
| 24 | + "\n", |
| 25 | + "This recipe is significantly different for IPython 4.x and IPython 3.x (and below). IPython configuration files are organized in grops called *profiles*, which can be easilly chosen on IPython startup. In the case of IPython 3, a profile contains configuration for both IPython kernel and the front-ends (including the HTML notebook). With IPython 4, the language independent front-ends are separated into a new project, Jupyter, which has its own configuration directory, (`~/.jupyter` by default). IPython 4 still supports profiles, but they contain only kernel-related configuration. Jupyter does not have a notion of profiles.\n", |
| 26 | + "\n", |
| 27 | + "In this recipe, we are modifying the Notebook look, but we want to do it in a way that it does not mess up the default look. With IPython 3, it can be easilly done by using a dedicated profile. With Jupyter, it can still be done, but in a more convoluted way. This version of the recipe shows how to do it with IPython 3." |
| 28 | + ] |
| 29 | + }, |
| 30 | + { |
| 31 | + "cell_type": "markdown", |
| 32 | + "metadata": {}, |
| 33 | + "source": [ |
| 34 | + "1. First, we create a new IPython profile to avoid messing with our regular profile." |
| 35 | + ] |
| 36 | + }, |
| 37 | + { |
| 38 | + "cell_type": "code", |
| 39 | + "execution_count": null, |
| 40 | + "metadata": { |
| 41 | + "collapsed": false |
| 42 | + }, |
| 43 | + "outputs": [], |
| 44 | + "source": [ |
| 45 | + "!ipython profile create custom_css" |
| 46 | + ] |
| 47 | + }, |
| 48 | + { |
| 49 | + "cell_type": "markdown", |
| 50 | + "metadata": {}, |
| 51 | + "source": [ |
| 52 | + "2. Now, we retrieve in Python the path to this profile (this should be `~/.ipython`) and to the `custom.css` file (empty by default)." |
| 53 | + ] |
| 54 | + }, |
| 55 | + { |
| 56 | + "cell_type": "code", |
| 57 | + "execution_count": null, |
| 58 | + "metadata": { |
| 59 | + "collapsed": false |
| 60 | + }, |
| 61 | + "outputs": [], |
| 62 | + "source": [ |
| 63 | + "dir = !ipython locate profile custom_css\n", |
| 64 | + "dir = dir[0]" |
| 65 | + ] |
| 66 | + }, |
| 67 | + { |
| 68 | + "cell_type": "code", |
| 69 | + "execution_count": null, |
| 70 | + "metadata": { |
| 71 | + "collapsed": false |
| 72 | + }, |
| 73 | + "outputs": [], |
| 74 | + "source": [ |
| 75 | + "import os\n", |
| 76 | + "csspath = os.path.realpath(os.path.join(\n", |
| 77 | + " dir, 'static/custom/custom.css'))" |
| 78 | + ] |
| 79 | + }, |
| 80 | + { |
| 81 | + "cell_type": "code", |
| 82 | + "execution_count": null, |
| 83 | + "metadata": { |
| 84 | + "collapsed": false |
| 85 | + }, |
| 86 | + "outputs": [], |
| 87 | + "source": [ |
| 88 | + "csspath" |
| 89 | + ] |
| 90 | + }, |
| 91 | + { |
| 92 | + "cell_type": "markdown", |
| 93 | + "metadata": {}, |
| 94 | + "source": [ |
| 95 | + "3. 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." |
| 96 | + ] |
| 97 | + }, |
| 98 | + { |
| 99 | + "cell_type": "code", |
| 100 | + "execution_count": null, |
| 101 | + "metadata": { |
| 102 | + "collapsed": false |
| 103 | + }, |
| 104 | + "outputs": [], |
| 105 | + "source": [ |
| 106 | + "%%writefile {csspath}\n", |
| 107 | + "\n", |
| 108 | + "body {\n", |
| 109 | + " /* Background color for the whole notebook. */\n", |
| 110 | + " background-color: #f0f0f0;\n", |
| 111 | + "}\n", |
| 112 | + "\n", |
| 113 | + "/* Level 1 headers. */\n", |
| 114 | + "h1 {\n", |
| 115 | + " text-align: right;\n", |
| 116 | + " color: red;\n", |
| 117 | + "}\n", |
| 118 | + "\n", |
| 119 | + "/* Code cells. */\n", |
| 120 | + "div.input_area > div.highlight > pre {\n", |
| 121 | + " font-size: 10px;\n", |
| 122 | + "}\n", |
| 123 | + "\n", |
| 124 | + "/* Output images. */\n", |
| 125 | + "div.output_area img {\n", |
| 126 | + " border: 3px #ababab solid;\n", |
| 127 | + " border-radius: 8px;\n", |
| 128 | + "}\n", |
| 129 | + "\n", |
| 130 | + "/* Selected cells. */\n", |
| 131 | + "div.cell.selected {\n", |
| 132 | + " border: 3px #ababab solid;\n", |
| 133 | + " background-color: #ddd;\n", |
| 134 | + "}\n", |
| 135 | + "\n", |
| 136 | + "/* Code cells in edit mode. */\n", |
| 137 | + "div.cell.edit_mode {\n", |
| 138 | + " border: 3px red solid;\n", |
| 139 | + " background-color: #faa;\n", |
| 140 | + "}" |
| 141 | + ] |
| 142 | + }, |
| 143 | + { |
| 144 | + "cell_type": "markdown", |
| 145 | + "metadata": {}, |
| 146 | + "source": [ |
| 147 | + "4. Opening a notebook with the `custom_css` profile leads to the following style:" |
| 148 | + ] |
| 149 | + }, |
| 150 | + { |
| 151 | + "cell_type": "markdown", |
| 152 | + "metadata": {}, |
| 153 | + "source": [ |
| 154 | + "5. We can also use this stylesheet with nbconvert. We just have to convert a notebook to a static HTML document, and copy the `custom.css` file in the same folder. Here, we use a test notebook that has been downloaded on this book's website (see *Getting started*)." |
| 155 | + ] |
| 156 | + }, |
| 157 | + { |
| 158 | + "cell_type": "code", |
| 159 | + "execution_count": null, |
| 160 | + "metadata": { |
| 161 | + "collapsed": false |
| 162 | + }, |
| 163 | + "outputs": [], |
| 164 | + "source": [ |
| 165 | + "!cp {csspath} custom.css\n", |
| 166 | + "!ipython nbconvert --to html data/test.ipynb" |
| 167 | + ] |
| 168 | + }, |
| 169 | + { |
| 170 | + "cell_type": "markdown", |
| 171 | + "metadata": {}, |
| 172 | + "source": [ |
| 173 | + "Here is how this HTML document look like:" |
| 174 | + ] |
| 175 | + }, |
| 176 | + { |
| 177 | + "cell_type": "code", |
| 178 | + "execution_count": null, |
| 179 | + "metadata": { |
| 180 | + "collapsed": false |
| 181 | + }, |
| 182 | + "outputs": [], |
| 183 | + "source": [ |
| 184 | + "from IPython.display import IFrame\n", |
| 185 | + "IFrame('test.html', 600, 650)" |
| 186 | + ] |
| 187 | + }, |
| 188 | + { |
| 189 | + "cell_type": "markdown", |
| 190 | + "metadata": {}, |
| 191 | + "source": [ |
| 192 | + "> You'll find all the explanations, figures, references, and much more in the book (to be released later this summer).\n", |
| 193 | + "\n", |
| 194 | + "> [IPython Cookbook](http://ipython-books.github.io/), by [Cyrille Rossant](http://cyrille.rossant.net), Packt Publishing, 2014 (500 pages)." |
| 195 | + ] |
| 196 | + } |
| 197 | + ], |
| 198 | + "metadata": { |
| 199 | + "kernelspec": { |
| 200 | + "display_name": "Python 3", |
| 201 | + "language": "python", |
| 202 | + "name": "python3" |
| 203 | + }, |
| 204 | + "language_info": { |
| 205 | + "codemirror_mode": { |
| 206 | + "name": "ipython", |
| 207 | + "version": 3 |
| 208 | + }, |
| 209 | + "file_extension": ".py", |
| 210 | + "mimetype": "text/x-python", |
| 211 | + "name": "python", |
| 212 | + "nbconvert_exporter": "python", |
| 213 | + "pygments_lexer": "ipython3", |
| 214 | + "version": "3.5.1" |
| 215 | + } |
| 216 | + }, |
| 217 | + "nbformat": 4, |
| 218 | + "nbformat_minor": 0 |
| 219 | +} |
0 commit comments