Skip to content

Commit df9155a

Browse files
BCSharpBCSharp
committed
Cloned Recipe 3.4 to a IPython 3-specific file.
1 parent f14dd5e commit df9155a

File tree

1 file changed

+219
-0
lines changed

1 file changed

+219
-0
lines changed

‎notebooks/chapter03_notebook/04_css_ipy3.ipynb

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
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

Comments
 (0)