header.png

Author: Jens Henrik Göbbert

Index

Markdown Tipps & Tricks (for Jupyter Notebook)

Markdown Tipps & Tricks (for Jupyter Notebook)

Markdown writing skills are essential to portray your work in the Jupyter notebook to offer the reader a sufficient explanation of both the code and the concept.

I have collected informations for different sources. Thanks to them!


What’s Markdown?

Markdown is a light markup language with a simple text syntax. Markdown should be easy to write and above all easy to read. John Gruber developed the Markdown language in 2004 in collaboration with Aaron Swartz with the goal of enabling people to "write in an easy to read and easy to write plain text format and possibly convert it to structurally correct XHTML (or HTML)". However, one should not assume that "Markdown" is a substitute for HTML. HTML is a format for publishing, while Markdown is a format for reading. The syntax of markup is minimal and only applies to a tiny portion of HTML tags. The idea of Markdown is to make it easier to read, write and edit prose, without the intention of creating a syntax that only serves to quickly add HTML tags. Therefore, the formatting syntax of Markdown deals only with questions that can be expressed in plain text. For everything else, use HTML. You don't have to make any preamble or delimitation to indicate that you are switching from Markdown to HTML - you simply use the tags.

The following examples start with some simple examples and then show some not so common tricks. Have fun with them!

EMPHASIS

This text will be italic
This will also be italic

This text will be bold
This will also be bold

You can combine them

code
*This text will be italic*  
_This will also be italic_  

**This text will be bold**  
__This will also be bold__  

_You **can** combine them_

BLOCKQUOTES

Blockquotes can hold the large chunk of text and are generally indented.

This is a blockquote

code
> This is a blockquote

TASK LISTS

I have to admit, tasks lists are my favorite.

  • [x] selected item
  • [ ] unselected item
* [x] selected item  
* [ ] unselected item

GRAPHICS

You can attach graphics (such as images) to a notebook in Markdown cells.

Note1: You can also Drag and Drop your images to the Markdown cell to attach it to the notebook.

Note2: Below I have used links to images on the web but you can very well use an offline image by adding the complete filename (plus the file path if it is in a different directory other then the Jupyter Notebook).

  • One simple way of adding an image to a Markdown cell is through the following syntax
  • If you want to add a hover title to the image then you can simply add it at the end

![](https://www.python.org/static/community_logos/python-logo-master-v3-TM.png "Python Logo")
  • You can also use the reference-style format for the images:

![][some-id]

[some-id]: https://www.python.org/static/community_logos/python-logo-master-v3-TM.png "Python Logo"
  • You can also control the size of the image and its position
<div>
  <img src=https://www.python.org/static/community_logos/python-logo-master-v3-TM.png title="Python Logo" width="120" style="float:left"/>
  <img src=https://www.python.org/static/community_logos/python-logo-master-v3-TM.png title="Python Logo" width="240" style="float:center"/>
  <img src=https://www.python.org/static/community_logos/python-logo-master-v3-TM.png title="Python Logo" width="360" style="float:right"/>
</div>
  • Drop-in image
    You can attach an image (or animated gif) to the notebook and make it part of the .ipynb file.
    Simply drag-and-drop it to the notebook.
    ATTENTION The image will be stored in the notebook. If you do not reference to them any more they will automatically be removed from the notebook!

mind_blown.gif

code
![mind_blown.gif](attachment:23203f8f-980e-4dc6-a95d-fbaa16e37477.gif)

COLORED NOTE BOXES

Use one of the following <div> tags to display text in a colored box.
The color of the box is determined by the alert type that is specified.

Tip: Use blue boxes (alert-info) for tips and notes.
<div class="alert alert-block alert-info">
<b>Tip:</b>
Use blue boxes (alert-info) for tips and notes.
</div>

Example: Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed. Typically also used to display warning messages.
<div class="alert alert-block alert-warning">
<b>Example:</b>
Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed.
Typically also used to display warning messages.
</div>

Success: This alert box indicates a successful or positive action.
<div class="alert alert-block alert-success">
<b>Success:</b>
This alert box indicates a successful or positive action.
</div>

"alert alert-secondary" role="alert" Danger: This alert box indicates a dangerous or potentially negative action.
<div class="alert alert-block alert-danger">
<b>Danger:</b>
This alert box indicates a dangerous or potentially negative action.
</div>

CELL BACKGROUND COLOR

Useful for highlighting to grab the attention of the reader towards certain points.

<code style="background:yellow;color:black">
Useful for highlighting to grab the attention of the reader towards certain points.
</code>

Do not forget to buy milk today.

Do not forget to buy <mark>milk</mark> today.

I also tend to use the following color style when adding a piece of terminal code to a Markdown cell:

C:\Users\YOUR_USERNAME> pip3 install roughviz

<p style="background:black">
<code style="background:black;color:white">C:\Users\YOUR_USERNAME> pip3 install roughviz</code>
</p>

VIDEOS

<video controls="controls"
       src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4" 
       poster="https://upload.wikimedia.org/wikipedia/commons/2/2b/Big.Buck.Bunny.-.Frank.Rinky.Gimera.png"
       width="640" height="360" type="video/mp4">
    <img alt="HTML5 MP4/H.264 Video" 
         src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Big.Buck.Bunny.-.Frank.Rinky.Gimera.png" 
         title="No video playback capabilities" 
         width="640" height="360">
</video>

EMBEDDING CONTENT USING PYTHON

  • YouTubes Videos
In [4]:
from IPython.display import YouTubeVideo
YouTubeVideo('1j_HxD4iLn8', height=480, width=640, start=30)
Out[4]:
  • HTPS-Webpages
In [5]:
from IPython.display import IFrame
IFrame('https://en.wikipedia.org/wiki/HTTPS', width=800, height=450)
Out[5]:
  • PDFs
In [6]:
from IPython.display import IFrame
IFrame('https://arxiv.org/pdf/1406.2661.pdf', width=800, height=450)
Out[6]: