Learn How to Write Markdown & LaTeX in The Jupyter Notebook

Not only Jupyter. Google Colab, R Markdown, and much more.

Interactive notebooks are experiencing a rise in popularity. Why? Simply because it’s a great teaching environment, powerful, shareable, and provides the ability to perform data visualization in the same environment. Which interactive notebooks should I use? I recommend:

• The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
• Colaboratory is a free Jupyter notebook environment that requires no setup and runs entirely in the cloud.

Both of them support

1. Markdown which is a markup language that is a superset of HTML.
2. Latex to render mathematical and scientific writing.

Markdown

It’s a very simple language that allows you to write HTML in a shortened way. It can be used on some websites like Stack Overflow or to write documentations (essentially on GitHub).

Markdown file extension is .md

When you write in Markdown, you use shortened notations which are replaced by the corresponding HTML tags. Each time, I will tell you the HTML equivalent of the Markdown notation to show you how Markdown made our life easier than ever.

Even web developers, now, use Markdown then convert it to HTML using some websites.

• Headings

You make titles using hashtags #. A single hashtag gives you a title (h1), two hashtags give you a subtitle (h2) and so on as shown below:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

HTML equivalent:

• Paragraphs

Paragraphs are represented by the <p> tag in HTML. In Markdown, they’re separated by one or more blank lines. Like HTML, whitespace is ignored. So if you add 10 blank lines, you’re still only going to have one paragraph.

This is a paragraph of text.

This is another paragraph of text.

HTML equivalent:

• Line breaks

Just end a line with two or more spaces , then type return. Or leave an empty line.

This is a text.     <!-- spaces -->
This is another text.

HTML equivalent:

• Mark emphasis

You can add emphasis by making text bold or italic.

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes ~ . ~~Scratch this.~~

HTML equivalent:

• Lists

Creating lists in Markdown is a real pleasure, you will see that there is nothing simpler!

1. Item 1
2. Item 2 ( we can type 1. and the markdown will automatically numerate them) 
* First Item
  * Nested item 1
  * Nested item 2
    1. Keep going
    1. Yes
  
* Second Item
- First Item
- Second Item

HTML equivalent:

• Links and Images

To create a link, you must place the text of the link in square brackets followed by the URL in parentheses. Images are almost inserted in the same way as links, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses.

<!-- [Text](link) -->
[Link Text](https://medium.com/@ahmedazizkhelifi "Optional Title")

<!-- ![Alt Text](image path "title") -->
![Alt Text](https://miro.readmedium.com/max/80/0*PRNVc7bjff0Jj1pm.png "Optional Title")

<!-- Linking Image -->
<!-- [![Alt Text](image path "title")](link) -->[![Alt Text](https://miro.readmedium.com/max/80/0*PRNVc7bjff0Jj1pm.png "Optional Title")](https://medium.com/@ahmedazizkhelifi)

HTML equivalent:

• Horizontal Rule

To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.

Reading articles on Medium is awesome.
---
Sure !!

HTML equivalent:

• Table

It’s so freaking easy. And you can use this website to generate them. Use \ before the dollar signs $, on your Notebook, otherwise, you’ll enter the math display mode (check it out on the LaTeX side).

| Id | Label    | Price |
|--- |----------| ------|
| 01 | Markdown |\$1600 |
| 02 | is       |  \$12 |
| 03 | AWESOME  | \$999 |

HTML Equivalent:

• Code and Syntax Highlighting

```python
def staySafe(Coronavirus)
  if not home:
    return home
```

HTML Equivalent:

• Blockquotes

Blockquotes work like replies to e-mails: you must precede the quoted lines with a >.

> This is a blockquote.
>  
> This is part of the same blockquote.

Quote break

> This is a new blockquote.

HTML Equivalent:

LaTeX

Have you ever asked yourself, how they write complex maths and physics equations using computer? Well, it’s all about LaTeX.

The Jupyter Notebook uses MathJax to render LaTeX inside HTML / Markdown. Just put your LaTeX math inside $ $. Or enter in display math mode by writing between$$ $$.

Important Notes:

1. To add little spacing in math mode use \,
2. To add a new line when in math mode use \\
3. To display fraction use \frac{arg 1}{arg 2}
4. For power (superscripts text) use ^{}
5. For indices (subscripts) use _{}
6. For roots use \sqrt[n]{arg} The [n]is optional.

LaTeX file extension is .tex

• Greek Letters

To write greek letters, type \ and the letter name:

Important Note: To write Capital Greek Letter, type the first case after the backslash \as an uppercase, for example:

\delta >>> δ 
\Delta >>> Δ

\omega >>> ω
\Omega >>> Ω

As shown in this figure:

• Roman Names:

• Other Symbols

• Vertical curly braces:

To define a left vertical curly brace we use the attribute

\left\{

to close it we use

\right\}

• Horizontal curly braces

For horizontal curly braces, we use :

\underbrace{...}
\overbrace{...}

• Derivative

• Limit

• Sum

• Product

• Integral

• Matrix

Resources:

• https://www.datasciencecentral.com/profiles/blogs/all-about-using-jupyter-notebooks-and-google-colab
• https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols
• https://jupyter.org/
• https://en.wikipedia.org/wiki/Project_Jupyter
• https://en.wikipedia.org/wiki/Markdown
• http://tug.ctan.org/info/undergradmath/
• https://openclassrooms.com/en/courses/1304236-redigez-en-markdown

Thanks For Reading! 😄

Khelifi Ahmed Aziz