Adding custom styled paragraphs in markdown cells

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)