Adding custom styled paragraphs in markdown cells

jupyter-notebook

Solution

A simple way to add warning, note, success (etc...) boxes (also called admonition or alert boxes) is simply using the bootstrap classes already included with the notebook. The only caveat is that links and other styles (e.g. bold) must be specified in HTML inside the box.

Example

A markdown cell containing this code:

# Upload data files
<p class="lead">This <a href="https://jupyter.org/">Jupyter notebook</a>
shows how to upload data files to be converted
to [Photon-HDF5](http://photon-hdf5.org) format. </p>

<i>Please send feedback and report any problems to the 
[Photon-HDF5 google group](https://groups.google.com/forum/#!forum/photon-hdf5).</i>

<br>
<div class="alert alert-warning">
<b>NOTE</b> Uploading data files is only necessary when running the notebook online.
</div>

will result in this output:

You can change `alert-warning` with `alert-success`, `alert-info` or `alert-danger` to get different colors for the box.

Problem

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.

Original source