Markdown cell in Jupyter notebook

Last Updated : 03 Apr, 2024

Jupyter Notebook(formerly IPython Notebook) is a web-based interactive computational environment for creating Jupyter notebook documents. Markdown is a light weight and popular Markup language which is a writing standard for data scientists and analysts. It is often converted into the corresponding HTML by which the Markdown processor allows it to be easily shared between different devices and people. In this tutorial, you’ll learn how to use and write with different markup tags using Jupyter Notebook.

In this tutorial you will learn how to use the following :

Headings
Colored note boxes
Indented block
Bullets
Monospace font
Embedded code
Mathematical symbols and LaTeX equations
Line Break
Bold and Italic text
Horizontal lines
Geometric shapes
Ordered and Unordered lists
Internal and external links
Table
Image
GitHub flavored markdown

Activating a Markdown cell

Text can be added to Jupyter Notebooks using Markdown cells. You can change the cell type to Markdown by using the Cell menu, the toolbar, or the key shortcut m. Markdown is a popular markup language that is a superset of HTML. It can be activated in Jupyter notebook as follows :

select the markdown option from the tab above.

Headings

You can add headings by starting a line with one (or multiple) ‘#’ followed by a space, as in the following example:

Input :

Output :

Use the required heading according to the context

Headings can also be used with “<h1> heading here <h1>” tag.

Colored note boxes

Use the div tags to create a colored note box. Not all markdown code works within a div tag, so review your colored boxes carefully! For example, to make a word bold, surround it with <b>text</b> instead of two asterisks or underscores.

Note boxes : Use blue boxes for tips and notes. If it’s a note you don’t have to include the word “Note”.

Input :

Output :

This is a note markdown cell

Example boxes : Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed.

Input :

Output :

This is an example markdown cell

Warning boxes : Try to avoid warning boxes as much as possible.

Input :

Output :

This is a warning markdown cell

Success boxes : Use green boxes(or success boxes) in a restricted or infrequent manner. For example, if you have a lot of related content to link to, maybe you decide to use green boxes for related links from each section of a notebook.

Input :

Output :

This is a success markdown cell

Indenting

Use a greater than sign “>” and then a space, then type the text. Everything is indented until the next carriage return.

use ‘>’ * x times. where x is the number of times you want to indent the given text.

Input :

Output :

Example of a nested indented block

They can also be obtained with <blockquote>text</blockquote>

Input :

Output :

Example of a block quote using <blockquote> tag

Bullets

Use the dash sign “- ” with two spaces after it or a space, a dash, and a space ” – “, to create a circular bullet. To create a sub bullet, use a tab followed a dash and two spaces. You can also use an asterisk(“*”) instead of a dash, and it works the same.

Input :

Output :

Example of circular, square and sub-bullets

Monospacefont

Surround text with a back single quotation mark ( ` ). Use monospace for file path and file names and for text users enter or message text users see.

Input :

Output :

Example of a monospace font

Embedded code

You can embed code meant for illustration instead of execution in Python:

The Code section is the part that specifies the code of different programming languages and can be rendered where inline code starts with ‘ `inline code goes here` ‘ back-ticks around it, but the block of code starts with three back-ticks ‘ “` block line code goes here “` ‘. Also, the Markup tag for a Code section is ‘ <code>code goes here<code> ‘.

Input :

Using Markdown

Output :

Using markdown to represent python code section

Input :

Using Markup tags

Output :

Using markup tags to represent python code

Mathematical symbol and LaTeX equations

The mathematical symbol in Markdown is included in ‘$ mathematical expression goes here $’ enclosed in a dollar symbol and in Markup you can follow this link for more detail: Mathematical Operators. You can see the example of using the mathematical symbols below.

Use this code: $ mathematical symbols $. You can include mathematical expressions both inline: ei?+1=0 and displayed:

Expression in a separate line

Inline expressions can be added by surrounding the latex code with $:

Input :

Output :

This is an inline representation of math expression

Expressions on their own line are surrounded by $$:

Input :

Output :

this is a outline representation of math expression

Line Break

The line break tag starts with <br> tag with no closing tag which breaks the line, and the remaining contents begin with a new line with the example shown below.

Input :

Output :

“br tags and it is awesome” appears in a new line.”

Bold and Italic text

You can use <b> tags, ‘**’ i.e. ‘double asterisk’ or ‘__’ i.e. ‘double underscore’ to get bold text with the following syntax.

Input :

Output :

Example of bold text.

You can use <i> tags, ‘*’ i.e., single asterisk or ‘_’ i.e., single underscore to get the italic text for the following syntax. Don’t leave a space between the asterisk and the text because it counts as a bullet.

Input :

Output :

Example of italic text

Horizontal lines

You can obtain a horizontal line by using Markdown ‘—‘ three hyphens or Markup tags <hr>

Both of the syntaxes above will render the horizontal line across from one end to another end after clicking “Run”.

Input :

Output :

Example of horizontal lines

Ordered and Unordered lists

Ordered lists :

Input :

Output :

This is an example of an ordered list

Unordered lists : The Unordered list is a bullet list which is obtained by using the <ul> tag and ending with the </ul> tag, see the example below:

Alternatively, the Unordered list can start with the ‘-‘ symbol with space, which gives the black circle symbol and can also start with the ‘*’ symbol with space, which gives the black square symbol.

Output :

This is an example of unordered list

Internal and External Links

Internal link : The id defined above can be linked to the section of the notebook by following the code which makes the link clickable.

[Section title](#division_ID)

The example of the above can be seen below where the id defined is linked with the section and clickable link obtained after clicking “Run” in the toolbar.

Input :

Output :

This is an internal link

Internal Link in Markdown starts with <a> tag with unique id defined by the attribute ‘id’ which can be linked in the notebook with the example below :

Input :

Output :

Internal link using <a></a> tag

External links : External Link in Markdown starts with <a> and ends with <a> tag, i.e., <a> stands for the anchor which defines the link, and it has attribute ‘href’ also called as hyper reference which contains the destination address of the link or URL and texts between tags is visible and is clickable to open the destination address as shown below.

Input :

Alternatively, it could also start with the __(URL for the site)__ where the double underscore is on both sides with the text link enclosed in a square bracket and the URL for the site is enclosed in a parenthesis followed by the URL.

Input :

Output :

Example of an external link

Table

The Table contains the information in rows and columns and is built by the combination of ‘|’ i.e. ‘vertical pipe’ to separate each column and ‘-‘ i.e., hyphen symbol to create the header where the blank line, i.e., a combination of vertical pipe and dashes to render the table format.

Also, you can vary the cells by roughly aligning with the columns, and the notebook will automatically resize the content in the given cell.

Input :

Alternatively, the Markdown can be used to build tables where < table > is used to define a table with its width in percentages.<tr> sets table row which gives the bold with centered text along with table heading is described by <th> is at the top of the table with the other entries in the table are set by the <td> i.e., table data tag.

Input :