The Only Markdown Cheatsheet You Will Ever Need
Tags: github, tutorial, markdown, webdev
Published: 2023-01-15 22:25:17

You must have found yourself in a situation where you needed to write something using Markdown.

> _Wait, so what is Markdown anyway? It looks like plain text and kinda feels like HTML, but it’s neither of those things?_

Don’t worry, I was a bit confused the first time I had to use Markdown. But after a short time, I got used to it and realized it was really cool. By the end of the article, you will know everything there is to know in order to be able to use Markdown on a daily basis.


![Typewriter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li3sf2d2mhyfrccd2uoa.jpeg)
###### _Photo by Bernard Hermant on Unsplash_  
---

## OK, tell me again, what is Markdown and where will I use it anyway?
Markdown is a lightweight markup language that you can use to format plain text documents.

You probably know that every repository on GitHub has its own README file that explains the very purpose of the repository. Every project needs good documentation. Documentation for GitHub is written using Markdown. That is exactly why it’s necessary to handle some basics well. The second reason is that you are most likely to attract new connections and improve your networking by having an attractive profile README.

That’s it! Enough theory for today. The pure practical part goes on.

---

# Markdown Cheatsheet
There are a lot of elements you can write in Markdown, so let’s dive into it.

📄 I have also created PDF version of the Cheatsheet. You can find & download it [here](https://github.com/im-luka/markdown-cheatsheet). Feel free to use it & share it! ✌🏼

**PS.** Please note that GitHub Markdown still needs to support some of the features below. Perhaps in the future, they might include it. Here you can find [the GitHub link of the repo](https://github.com/im-luka/markdown-cheatsheet) where I wrote detailed [docs specifically for GitHub Markdown](https://github.com/im-luka/markdown-cheatsheet).

## Paragraph
By writing the regular text, you are basically writing a paragraph.

![Paragraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anf2ny3no3t0l26ntyax.png)
> ###### Paragraph

## Headings
There are 6 heading variants. The number of “**#**“ symbols, followed by text, indicates the importance of the heading.

![Headings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wotzyypxewzlaa84et9z.png)
> ###### Headings

## Emphasis
Modifying text is so neat and easy. You can make your text bold, italic, strikethrough, highlighted, subscript, or superscript.

![Emphasis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c3y52wflw9gic3t1jn0.png)
> ###### Emphasis

## Blockquote
Want to emphasize the importance of the text? Say no more.

![Blockquote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47mu4id1ouay1ts795jk.png)
> ###### Blockquote

## Images
If you are using GitHub, the best way is to simply drag & drop the image from your computer directly to README file. You can also create a reference to the image and assign it that way. Here is the syntax.

![Images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iduze0f60z7j9rnjcpo.png)
> ###### Images

## Links
Similar to images, links can also be inserted directly or by creating a reference. You can create both inline and block links.

![Links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cawmi3zosms4depgytp.png)
> ###### Links

## Code
You can create both inline and full-block code snippets. You can also define the programming language you were using in your snippet. All by using backticks.

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dmo2rbbn75ti3y5w7gz.png)
> ###### Code Snippets

## Lists
As you can do in HTML, Markdown allows the creation of both ordered and unordered lists.

![Ordered List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7upx1ft4g8dfnbmrp6o.png)
> ###### Ordered List

![Unordered List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnmiwji4ln87x7bzrweo.png)
> ###### Unordered List

You can also mix both lists and create sublists.

**PS.** Try not to create lists deeper than two levels. It’s the best practice.

![Mix List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86oqskyuzib8dd4zwe7w.png)
> ###### Mix List

It’s also possible to create definition lists (term — definition), something you may not use often, but there is a possibility.

![Definition List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dqaeqf7q8r6d1w4hls9.png)
> ###### Definition List

## Table
Great way to display well-arranged data. Use “**|**“ symbol to separate columns and “**:**“ symbol to align row content.

![Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnmyt4zro4kigpmnvyaa.png)
> ###### Table

You can also create a “messy“ table by excluding outer “**|**“ symbols and not making your code well structured. Of course, it will still work, but hey → we should always arrange small things in the right way.

![Messy Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndzx63vvfhh03lwvdj9a.png)
> ###### Messy Table

## Task List
Keeping track of the tasks that are done and those that need to be done.

![Task List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h86g897t6kkvemtkcyn.png)
> ###### Task List

## Footnote
Want to describe something at the end of the file? Use footnote!

![Footnote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2qqxz9zl9wmrbssi5yx.png)
> ###### Footnote

## Heading ID
You can give ID to a heading to jump straight to that part of the file from wherever you are.

![Heading ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn8jdfrpda8qmr4vi5jp.png)
> ###### Heading ID

## Horizontal Line
You can use asterisks, hyphens or underlines (*, -, _) to create a horizontal line. The only rule is that you must include at least three chars of the symbol.

![Horizontal Line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4ep9mrq25p88cl5wo71.png)
> ###### Horizontal Line

## HTML
You can also use raw HTML in your Markdown file. Most of the time that will work well, but sometimes you can experience some differences that you are not used to when working with standard HTML. Using CSS will not work.

![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cixf2wjyykc1yi2zlhg.png)
> ###### HTML

---

_Voila!_

Thank you for reading! I showed you everything there is to offer about using Markdown.

You can also download PDF version of the Cheatsheet & view docs specifically for GitHub Markdown [here](https://github.com/im-luka/markdown-cheatsheet).  

Feel free to use it and consider supporting me by giving it a star if you like it & following me on my socials! ✌🏼

Also, take a look at [my GitHub README file](https://github.com/im-luka/im-luka) that I created using Markdown.

You can also find some great Markdown docs [here](https://github.com/adam-p/markdown-here).

---

> _You can always find me on [GitHub](https://github.com/im-luka), [LinkedIn](https://www.linkedin.com/in/lukadusak/) and [Twitter](https://twitter.com/1ukadev)._
>
> _Let’s connect! 📲_