jsc-logo.jpg

Author: Jens Henrik Göbbert

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

markdown
![](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:

markdown
![][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!