ipython notebook - Adding custom styled paragraphs in markdown cells

Question

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.

Answer 1

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:

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