MARKDOWN — AWESOME README FOR YOUR PROJECTS

Alexandre Rosseto
4 min readMar 19, 2021

This article will present the code structure for Markdown files and a suggestion, as a template, to make any personal project very interesting to your audience and, potentially, Headhunters.

Prerequisites: None.
Alternative language: See this article in Portuguese.

WHAT WILL I LEARN?

Write a Markdown using its main components to highlight your projects and how to create an awesome template to show your ideas or solutions. Also:

  • Edit and preview a Markdown (.md) file
  • Text formatting (italic, bold, title, subtitle)
  • How to use links
  • Insert quotes
  • How to use lists, enumeration and task lists
  • How to add images and GIFs
  • Tables
  • How to insert inline codes and blocks

I NEED A TEMPLATE TO SPEED UP

No worries! If you need a template to get ready as soon as possible, I will give you a good alternative, but it is also recommend go through this article to learn how to do it by yourself. Click here to go Github repository.

Apresente seu projeto de uma maneira incrível e se destaque!
Template available on GitHub

WHAT IS MARKDOWN?

It is a markup language, just like HTML and basically serves to stylize text on the web. In addition, some HTML tags also work.

MARKDOWN: EDIT AND PREVIEW

MD files can be edited in any text editor, even in a Windows Notepad (notepad). However, I will recommend to use Visual Studio Code because it has a very useful Add-On to preview what is being done at writing time.

  • Download VS Code
  • Follow the installation steps

With VS Code opened, go to Extensions, then type “Markdown” and choose the “Markdown All in One” extension. Then click on the green “Install” button as shown in the image below.

Visual Studio Code — Installing an Add-On

To create a file, go to File -> New File (Ctrl + N), then click the footer in the lower right corner on the purple line, as shown in the image below where it will probably be written “Plain Text”.

Visual Studio Code — Rodapé — Canto Direito

A box will be opened in the header of the created file which you will select it.

Visual Studio Code — Seleção Flutuante

Now, type Crtl+Shift+P and select the Add-On that you just installed.

Visual Studio Code — Command Palette

After doing this, you will have the screen split between your markdown code and the preview showing how it will look after being published on GitHub, for example.

Visual Studio Code — MD file preview

TEXT FORMATTING

HEADER

Formatting and Highlight

LINKS

QUOTES

LISTS, ENUMERATES AND TASK LIST

To make a task list in HTML, it would take a lot of space. So only the list will be shown.

IMAGES

In markdown: ![](image path)
However, it is not possible to resize the image.

In HTML: <img src=”image path”>
We can use the “height” and “width” attributes to change the size of the image.

TABLES

| Topo A        | Topo B        | Topo C    || ------------- |:-------------:| ---------:|| col 1         | col 2         |     $1600 || col 1         | col 2         |       $12 || col 1         | col 2         |        $1 |

INLINE CODE AND IN BLOCKS

This tip even applies to Medium.

  • Inserir um código inline ou em bloco

--

--

Alexandre Rosseto

Senior Tech Manager specialized in Java with experience in software factories and consultancies. LinkedIn: https://www.linkedin.com/in/alexandrerosseto