Open in app Get started

Published in Towards Data Science · Follow

You have 2 free member-only stories left this month. Sign up for Medium and get an extra one

Tanu N Prabhu · Follow

May 1, 2020 · 11 min read

Cheat-sheet for Google Colab

In this tutorial, you will learn how to make the most out of Google Colab.

Image credits: Medium

Introduction
Google Colab is an amazing tool that lets us build and execute an outstanding data science model
and provides us with an opportunity to document our journey. As Google Colab provides us code
cells to type the code, it also provides us with text cells to add the text. In this tutorial, we will focus
more on the text cell and see how we can master it by using some simple commands that I will
discuss in this tutorial. If you love documenting (like me) then you will enjoy reading this tutorial.
You can start exploring Google Colab from below given link. Believe me, it’s an amazing tool.
 Google Colaboratory
Edit description Open in app Get started

colab.research.google.com

Cheat-sheet
Below I will discuss some main handy tricks and shortcuts that can use and become a pro in
documenting. If you know Markdown, XML, and HTML coding then this might be a cakewalk or if
you are not familiar with either of those well today is the day to learn them all. Google Colab
supports both Markdown and HTML documentation. You can any of these to document. Just a
heads-up the whole code for this tutorial can also be found on my GitHub repository below:

Tanu-N-Prabhu/Python
Permalink Dismiss GitHub is home to over 50 million developers working together
to host and review code, manage…
github.com

All right, let’s get started.

To experiment with all of these commands use the “Text cell”

Image credits to Author (Tanu Nanda Prabhu)

 Open in app Get started

Heading
Below is the shortcut command for headings. There are different types of headings from Heading 1
to 6.

Markdown
Use # heading-name , the more you append # the size of the heading decreases as seen below:

Image Credits to Author (Tanu Nanda Prabhu)

HTML
Similarly, you can use HTML tags such as h1, h2, h3, h4, h5 and h6 for headings as shown below:

Image Credits to Author (Tanu Nanda Prabhu)

Bold
Bold make the text bolder and increases the text’s visibility. Open in app Get started

Markdown
To make the text bold in markdown surround it by ** (two stars) for example **Text-to-be-bold**

Image Credits to Author (Tanu Nanda Prabhu)

HTML
Using HTML we can bold the text by using the b tag as seen below:

Image Credits to Author (Tanu Nanda Prabhu)

Italicize
Similar to bold the text can also be italicized

Markdown
To make the text italicize in markdown surround it by * (one star) for example *Text-to-be-

italicize*

Image Credits to Author (Tanu Nanda Prabhu)

HTML
Also, this can be written in HTML using the i tag as shown below:

Image Credits to Author (Tanu Nanda Prabhu)

Strikethrough Open in app Get started

Used to strike through the text. A horizontal line is drawn in the middle of the text.

Markdown
To strikethrough, the text in markdown surround the text with two tilde’s character ~~ , such as

~~Text to be striked~~ .

Image Credits to Author (Tanu Nanda Prabhu)

HTML
In HTML we can use the s tag to strikethrough the text.

Image Credits to Author (Tanu Nanda Prabhu)

Combination
Also, we can combine all the formatting commands and style the text as shown below.

Markdown and HTML

Image Credits to Author (Tanu Nanda Prabhu)

 Open in app Get started
Lists
As we all know there are two types of lists:

1. Ordered List

2. Unordered List

As the name suggests an ordered list has an order (1, 2, 3,… or other). But an unordered list has no
order, as shown below.

Ordered and Unordered list in Markdown

In markdown for the ordered list, you can straightaway just type numbers like 1, 2, 3, and so on .

But for the unordered list, you can start with a * and this intern creates a bullet list.

Image Credits to Author (Tanu Nanda Prabhu)

HTML
We can use the HTML tags to play with the lists as shown below:

Ordered list
In the ordered list there are normal list, type 1, A, a, I, i types as shown below:

Normal list

Use the ol tag and for the list contents use the li tag as shown below:
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Type = “1”

Just add type = "1" inside the ol tag this will create an ordered list of 1, 2, 3, and so on. The list
items will be numbered with numbers (default).

Image Credits to Author (Tanu Nanda Prabhu)

Type = “A”

Just add type = "A" inside the ol tag this will create an ordered list of A, B, C, and so on. The list
items will be numbered with uppercase letters.

Image Credits to Author (Tanu Nanda Prabhu)

Type = “a”
 Open in app Get started

Just add type = "a" inside the ol tag this will create an ordered list of a, b, c, and so on. The list
items will be numbered with lowercase letters.

Image Credits to Author (Tanu Nanda Prabhu)

Type = “I”

Just add type = "I" inside the ol tag this will create an ordered list of I, II, III, and so on. The list
items will be numbered with uppercase roman numbers.

Image Credits to Author (Tanu Nanda Prabhu)

Type = “i”

Just add type = "i" inside the ol tag this will create an ordered list of i, ii, iii, and so on. The list
items will be numbered with lowercase roman numbers.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Unordered list
In the ordered list there are normal list, disc, square, circle, and none types as shown below:

Normal list

Use the ul tag and for the list contents use the li tag as shown below:

Image Credits to Author (Tanu Nanda Prabhu)

Disc

Just add type = "disc" inside the ul tag to create a disc-shaped list.

Image Credits to Author (Tanu Nanda Prabhu)

 Open in app Get started

Circle

Just add type = "circle" inside the ul tag to create a circle-shaped list.

Image Credits to Author (Tanu Nanda Prabhu)

Square

Just add type = "square" inside the ul tag to create a square-shaped list.

Image Credits to Author (Tanu Nanda Prabhu)

None

Just add type = "none" inside the ul tag to create a none-shaped list. In this case, the list will have
no points as shown below
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Description list
A description list is a list of terms, with a description of each term. The dl tag consists dt which
defines the name of the list and the dd tag describes each list.

Image Credits to Author (Tanu Nanda Prabhu)

Nested list
Nested lists are basically lists within lists.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Control list counting

An ordered list will start counting from 1. If you want to count from a specified number, you can use
the start attribute as shown below:
 Open in app Get started
Image Credits to Author (Tanu Nanda Prabhu)

To know more in-depth about the list in HTML please refer to the article below:

HTML Lists
Try it Yourself " An unordered list starts with the tag. Each list item starts with the
tag.
www.w3schools.com

Links
Links or hyperlinks allow users to click their way from page to page.

Markdown
In markdown write the title of the link inside square brackets [ ] and write the webpage address
inside round brackets or parenthesis ( ). Make sure you write the title first, followed by the
link.

Image Credits to Author (Tanu Nanda Prabhu)

HTML
In HTML for the hyperlinks, you can use the anchor a and href tag as shown below:

Image Credits to Author (Tanu Nanda Prabhu)

 Open in app Get started

Images
Sometimes one image is worth one thousand words. People can easily understand the concepts
better by seeing an image.

Markdown
Similar to the link you need to insert the link of the image inside the parenthesis. Make sure you
append ! at the beginning. If your link is broken or not valid, then the alt text would be
displayed.

Image Credits Makeameme.org

Image hover

You can simultaneously hover on the text to see the title of the image. To do this, you can put the
text of your choice inside the command as shown below:

![alt text](https://media.makeameme.org/created/online-class-cant.jpg "Online

Class Memes")

HTML
In HTML we can include an image using the img tag and you need to provide the source of the
image to the src tag.

Adjusting height and width

You can adjust the height and width of the image. Also, you can embed a GIF image too as shown
below. Get started
Open in app

Image Credits to Giphy.com

Images along with captions

It’s a great practice to give credit to the images taken from different sources (I mean citing the
images or providing the captions). With the help of figcaption tag we can provide captions to the
images.

Image Credits Makeameme.org

You can play with the align tag and try to align the caption according to your preference.
Format the code
Open in app Get started

There are two things that you need to understand here are:

1. Inline Code

2. Syntax highlighting

Inline Code
Sometimes you might want to insert a few code samples you can use Inline codes. To use the inline
code, you can use the backticks (``). Surround it with backticks as shown above.

Image Credits to Author (Tanu Nanda Prabhu)

Syntax highlighting
This is used when you write huge lines of codes inside Google Colab’s text editor. Sometimes
including huge python code snippets is not a good idea using inline codes, use syntax highlight in
this case. You must embed the code within ``` as shown below

Default syntax highlighting

This works irrespective of any programming language.

Image Credits to Author (Tanu Nanda Prabhu)

Python syntax highlighting

This can be used explicitly for python programming. You should include the name python at the
Open in app Get started
beginning.

Image Credits to Author (Tanu Nanda Prabhu)

Javascript syntax highlighting

This can be used explicitly for JavaScript programming. You should include the name javascript

at the beginning.

Image Credits to Author (Tanu Nanda Prabhu)

C programming syntax highlighting

This can be used explicitly for C programming. You should include the name c at the beginning.

Image Credits to Author (Tanu Nanda Prabhu)

As seen above you can highlight the code snippets based on different programming languages.
 Open in app Get started

Tables
There are a few times you might want to represent the information in the form of tables.

Markdown
You must use the | as an operator for different columns. By default, the table headers would be in
bold.

Image Credits to Author (Tanu Nanda Prabhu)

Colons can be used to align columns.

If you need to create any table then use the below tool to generate tables for you. All you have to do
select the type of table generators such as Latex, HTML, Markdown, and others. Enter the
contents inside the table and then click on Generate. You can then copy-paste the generated code in
the text editor and see a beautiful table without minimum effort.

Create LaTeX tables online — TablesGenerator.com

Set the desired size of the table using Table / Set size menu option. Enter the table data into the table:
copy…
www.tablesgenerator.com

HTML
In the case of HTML, you must use the table tag along with tr which is for the table rows and th

is for the table headers (Company Name and Founder) in this case. The td is for the table
description.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

You can also use the align tag and align the contents accordingly.

Indent
This is very useful when you need to differentiate some text like NOTE , HINT or any extra useful
information.

Markdown
You need to use the > for the indentation.

Image Credits to Author (Tanu Nanda Prabhu)

HTML
Similarly in HTML you can use the blockquote tag for the same purpose.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Horizontal Ruler
It is often a wonderful practice to draw a horizontal ruler after every chapter, or any concept while
you are writing. This just helps in differentiating things from one another.

Markdown
In case of markdown, you need to just use 3 --- (Minus).

Image Credits to Author (Tanu Nanda Prabhu)

HTML
In case of HTML, you need to use the tag hr for inserting a horizontal ruler.

Image Credits to Author (Tanu Nanda Prabhu)

Justify
Often many times you will write big paragraphs in your notebooks, but sometimes you might want
to justify them just to make it look neat. Here, you can use the align tag with justify as a value.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Image Credits to Author (Tanu Nanda Prabhu)

Similarly, you can use right , left , and center values and align the paragraph accordingly.

Line break
Some times you might want to start a new paragraph, so you will need to put a line break in
between both of them. There are two options here either you can just press the “Enter” key and
leave a line of space in the between or you can use the br tag also called a line break.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

Mathematical formulas
If you are using the notebooks for research purpose then you need to write a lot of equations and
mathematical symbols.

Symbols
Make sure you write the symbol name between $ and start with \ after the first $.

Image Credits to Author (Tanu Nanda Prabhu)

Equations
Follow the same rules i.e surround the equations between $ and start with / after the first $.
 Open in app Get started

Image Credits to Author (Tanu Nanda Prabhu)

To see more about the mathematical equations and symbols, please refer to the link below:

Writing Mathematics Formulas in Markdown

In this post, I am gonna show you how to write Mathematic symbols in markdown. since I am writing blog
post that hosted…
csrgxtu.github.io

All right, folks, that’s the end of the tutorial. I hope you learned many new things today. I tried to
keep this tutorial short but as there were many concepts I had to maximize it. But this cheat-sheet
will be useful in most of the interviews (technical documentation) or when you are documenting
your Jupiter notebooks. If I find more tips and tricks, then I will provide the details here. Until then,
stay safe and have a wonderful day. See you next time.
Sign up for The Variable Open in app Get started

By Towards Data Science

Every Thursday, the Variable delivers the very best of Towards Data Science: from hands-on tutorials and cutting-
edge research to original features you don't want to miss. Take a look.

Get this newsletter