Styling a Jupyter Notebook

Posted by Sam stoltenberg on September 8, 2020

Here I will go over multiple methods of using css and html to style and prettify your jupyter notebook like my photo below. For use in any html/css scenario I will be going over:

  • alert boxes
  • editing attributes in VSCode
  • css of headers
  • css of blockquotes
  • adding a shadow to an alert box
  • using markdown in a <div> block

Before:

After:


Alert Boxes:

These are basic html, that you can simply copy and paste into a markdown block of a Jupyter Notebook

  • Select desired markdown cell.
  • ctrl+m
  • try pasting the code below.
Let's start with THIS blue box:
<div class="alert alert-info">
  <strong>Let's start with THIS blue box:</strong>
</div>
  • class="alert alert-success" for

    green

  • class="alert alert-warning" for

    yellow, indicating a warning, or some findings that could be neutral->negative

  • class="alert alert-danger" for

    red, indicating something is bad or "dangerous", negative findings.

  • class="alert alert-info" for

    blue


Adding css into a notebook:

css is the different shadows, colors, and titles you see in the After: screenshot above

The folder structure you would use for css.

+--student.ipynb
|
|
+--styles
|  |
|  |
|  +--custom.css

If you want to import the css from that folder structure into your notebook you would use the below in a code cell.

# Styling notebook
from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()
Inside of the custom.css file you can customize things like:
  • Headers
  • Codeblocks
  • Bolded text
  • *alerts*
  • blockquotes
  • listelements
  • And many more...


Custom Headers:

A header is ^ exactly like that, there are 6 different header types ( h1-h6 ) defined as (## Header) in markdown with the number of # symbols being significant.

Lets take an h1 header as example:
In html
<h1> Title </h1>    
Or in markdown
# Title

Both showing up as:

Title

If I wanted to style the h1 header I would have in the .css file:
<style>
h1 {
  border: 1.5px solid #333;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, rgb(160, 147, 147));
  position: static;
}
</style>

Which would show all of the h1 headers as:

An HTML/CSS developing environment:
  • Visual Studio Code
    • HTML Preview extension by Thomas Haakon Townsend
    • A .html file where you can test the styles
  • For testing with markdown markdown-it Which I am using right now


Developing css in Visual Studio Code:

Color:

Hovering over any color opens a color selector window, and will automatically fill in the required code for the color you pick.

Styles:

Starting to type inside of a block will give you different suggestions of styling

Searching on the web for your specific needs can also help you find different attributes to change.

Blockquotes:

This is a block quote

There are two ways to make a blockquote:
In html
<blockquote>This is a blockquote</blockquote>   
Or in markdown
> This is a blockquote

Both showing up as:

This is a blockquote

If I wanted to style the blockquotes I would have in the .css file:
<style>
blockquote {
  border: 1px groove gray;
  background-color: rgb(219, 214, 214);
}
</style>

Which would show all blockquotes as:


Adding the shadow to alert boxes:

This is a little more complicated, as we will be “wrapping” the alert box with a shadow.

If I wanted to give a shadow to alert for jupyter notebook I would have in my css file:

Quick note: /* This is a css comment */

<style>
.shadow {

    /*Edit or add new attributes, change size, color, etc */
    width: 45em;
    box-shadow: 8px 8px 10px #444;
    border: 1px solid silver;

    /*For positioning in a jupyter notebook*/
    margin-top: 2em;
    position: relative;
    top: -25px
}
</style>

And I would display the alert box in the html/markdown as

<div class="shadow alert alert-success">  /*Note the 'shadow' keyword*/
  This is an alert box
</div>

Quick note: If you want to use markdown inside of an alert or any <div> block, you can simply include markdown=”1” in the class:

<div class="alert alert-success" markdown="1">

> This is a blockquote
> - And a list
>     - And a nested element with a **bold**

</div>

Which would look like:

This is a blockquote

  • And a list
    • And a nested element with a bold


In Conclusion:

We only looked at a few ways you can edit the css of a notebook or webpage, but there are many more markdown and html attributes you can change with css … EXPLORE!


Useful Links: