Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding custom styled paragraphs in markdown cells

I want to add more formatting elements than provided by the Markdown synthax in an IPython Notebook.

For example, I want to add a "Warning Box" or a "Memo Box" that are basically paragraph with different styles (for example different background color, border, an icon, etc...).

I guess I can add HTML code in the cell, for example a <div> with an inline style. But what is the "proper" way to do that, I mean the one that ipython developer promote?

Examples appreciated.

NB: I'm using the current 1.0dev version from git master.

like image 359
user2304916 Avatar asked Aug 02 '13 19:08

user2304916


People also ask

How do you add codes to markdown cell?

Just follow the same steps each time. Press Esc key, type m for markdown cell, press Enter key. The cursor is now in the markdown cell waiting for instructions. Type your code or paste a code block.

How do I add a paragraph in Jupyter Notebook?

Simply Enter Esc and type m it will convert to text cell.

How do you indent in markdown cell?

Use the greater than sign (>) followed by a space, for example: > Text that will be indented when the Markdown is rendered.

How do you edit a markdown cell in Jupyter Notebook?

Just double click on the markdown cell. Edit what you want to and Run. It will reflect the changes.


1 Answers

Answering to my own question...

Other solutions

Jim proposed to add some custom CSS style in a markdown cell of each notebook. This solution works, but is not convenient since you need to embed the style on each notebook. In my case I want a global style and I don't want to modify all the notebooks after every the style modification.

A natural solution would be using a custom file (custom.css) containing the style. However after trying these instructions the style is not applied to the notebook (it can be downloaded from the server though).

Best solution (so far)

I found a solution looking at this impressive book written as a collection of IPython notebooks. The author adds at the end of each notebook the following code cell:

from IPython.core.display import HTML def css_styling():     styles = open("./styles/custom.css", "r").read()     return HTML(styles) css_styling() 

Putting a file custom.css in your notebook folder (in the styles subfolder), the style will be loaded after the first cell execution. Moreover the style will be magically loaded every time the notebook is opened, without the need to execute the cell again!

This magic trick works because the style is saved in the ouput cell the first time we execute it, and although being invisible, will be saved like any other output. So when we load the notebook, and conseguentely the output cells, the style will be applied.

Sample CSS

To complete the answer I post a CSS style I used to create a "Warning box":

<style> div.warn {         background-color: #fcf2f2;     border-color: #dFb5b4;     border-left: 5px solid #dfb5b4;     padding: 0.5em;     }  </style> 

Save this style and load it using the code cell shown before. Now, to insert a warning box in your notebook use this syntax:

<div class=warn> **Warning:** remember to do bookeping   </div> 

That will be rendered like this:

enter image description here

For more general notebook styling you can take inspiration from the custom.css of the book mentioned above.

like image 117
user2304916 Avatar answered Oct 12 '22 00:10

user2304916