The Only Markdown Cheatsheet You Will Ever Need

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.

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. 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 where I wrote detailed docs specifically for GitHub Markdown.

Paragraph

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

Paragraph

Headings

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

Headings

Emphasis

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

Emphasis

Blockquote

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

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

Links

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

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 Snippets

Lists

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

Ordered List

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

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

Definition List

Table

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

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

Task List

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

Task List

Footnote

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

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

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

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

---

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.

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 that I created using Markdown.

You can also find some great Markdown docs here.

---

You can always find me on GitHub, LinkedIn and Twitter.

Let’s connect! 📲

Comments

[Oliver Praesto]

Awesome cheat sheet for Markdown!
One small thing to add for Ordered List is that you can do it with just 1.:s and it will output the correct numbers for you. This is good if you want to add something in between in the future, like this:

1. Foo
1. Bar
1. Baz

will show as:

1. Foo
2. Bar
3. Baz

[Luka Dušak]

You're right @oliie. Thanks for the great tip!

In addition to your comment, I would also add that you don't have to start with #1. You can start with any number you want, and the Ordered List will continue in sequence. Also, in that sequence, it's not possible to skip a specific number.

For example:

3. Typescript
4. React
7. Tailwind

would be:

3. Typescript
4. React
5. Tailwind

[Andre Du Plessis]

Thanks for this reference Luka. I like✨
the graphical way in which you presented it.

Here's a few you may want to consider adding:

Underlining Text

The standard methods don't work in the DEV.TO MD Editor, so you can use HTML tags as a workaround.

Underline

underline ( Not flying here ... )

__underline__

Use:
My Underlined Text

<u>My Underlined Text</u>

Underline Italics

underline italics ( Not flying here ... )

__*underline italics*__

Use:
My Underlined Italics Text

<u>*My Underlined Italics Text*</u>

Underline Bold

__**underline bold**__ ( Not flying here ... )

Use:
My Underline Bold Text

<u>__**My Underline Bold Text**__</u>

Underline Bold Italics

__***underline bold italics***__ ( Not flying here ... )

Use:
My Underlined Bold Italic Text

<u>__***My Underlined Bold Italic Text***__</u>

Underline Strikethrough

__~~Strikethrough~~__ ( Not flying here ... )

Use:
My Stricken Text

<u>~~My Stricken Text~~</u>

---

The Underline Strikethrough is weird and ⅄Z∀ᴚƆ, someone might not want to use it, while others would be 🤔 this is Great ⅄Z∀ɹƆ but not ZǝupɐW

As far as Emojis go there are some great repos on those too, which you could add, seeing that its fairly common to use them here and other Forem sites, as you have shown.

Thanks for your effort with this, as well as the numerous great comments that comes/came from it, which all makes it a great reference thread too!

[Luka Dušak]

Great comment @andre_adpc, thanks for sharing!

Connection with HTML when writing Markdown is very strong, lots of possibilities. But I wanted to focus more on Markdown and leave the HTML to itself.

I will definitely include your tips in the PDF version I am currently working on ✌🏼

[Lui]

Nice cheat sheet! Thank you for that.

As a major tip for any technical documentation that needs diagrams, I would mention Mermaid!
VSCode and IntelliJ need a small plugin for it.
Obsidian can render these diagrams too.

But the best thing is, that even GitHub can render these diagrams by default. So you can include diagrams in your Readme.md and its even git tracked.

Best way yet to include diagrams inside my markdown files!

[Andre Du Plessis]

This is a great tip about Mermaid, thanks Ludwig!

[Luka Dušak]

It's my pleasure @loebkes!

Oh, I didn't know about that. Definitely going to check this up! Thank you for sharing great info!

[MiguelMJ]

I didn't expect to learn anything new about markdown at this point... You proved me wrong!

[Luka Dušak]

Wow glad to hear that @miguelmj! Out of curiosity, which part are you referring to exactly?

[MiguelMJ]

Definition lists and headers IDs are new to me, and I've been using markdown for years hahaha. I used to do a lot of **term**: definition to achieve the effect of definition lists, and for IDs I wrote them directly as HTML headers.

One question: Do you know if all of the features described in your post are markdown default? Because, afaik, there exist features specific to different markdown flavors. For example, in the READMEs of Bitbucket, you can write [TOC] in any place of the markdown file to generate a table of contents. So I just wonder if all of these are universal, to say so.

[Luka Dušak]

Hahah yeah I see you, I'm very glad that you could find something new to learn here.

Well, afaik, all of the features I wrote about should be Markdown default. But, as you said, there are different Markdown flavours. For example, GitHub Markdown doesn't allow some of the default features, like Definition Lists or Header IDs (maybe that's the reason why it is new to you 😆).

So you must use a hacky way to solve a problem. Let's say you need Heading ID, you would probably do something like this (at least that's how I do it):

[Jump to a Heading ID](#some-id)

...

<a name="some-id" />

## Heading with some ID

I hope it helps ✌🏼

[adriens]

Very artistic cheatsheet : thanks a lot for sharing the work.

[Luka Dušak]

The pleasure is mine. Thanks for the nice words @adriens!

[adriens]

Maybe could you transform this as a reponsive slideshow in which slides would move by themselves, like a reveal.js ? This could be a relaxing yet teaching object ;-p

[Luka Dušak]

That's a good idea. I will definitely see what I can do 👨🏼‍💻

[David Macan]

Do you have any recommendation for editor or plugins for writing Markdown and viewing it rendered at the same time?

[johnblommers]

Typora, MarkText, Obsidian all let you edit directly in the rendered text.

IMHO this is huge. Markdown editors with an editor pane and a preview pane take up too much screen space. I prefer single-pane live editing.

[Luka Dušak]

Great comment @johannes_k_rexx, thanks for sharing!

I totally agree with you. Once you get all of the Markdown basics, that is a game changer to speed up your productivity 🔥

[Luka Dušak]

Yes, just like @oliie said, Markdown in VS Code works by default. All you have to do is press cmd-k v. I'm using VS Code so I can't really tell about other editors.

I can recommend some extensions that I have used occasionally:
Markdown All in One & Markdown Preview Enhanced

[Oliver Praesto]

This works in VS Code already! 🔥

[matija2209]

Thanks. That's actually useful.

[Luka Dušak]

You’re welcome @matija2209. Very glad to hear that ✌🏼

[Chris Jarvis]

Great Cheat Sheet. I did know how to align tables. Just fixed a table that was bugging me. I hated the the content was no centered,

Thank you.

[Luka Dušak]

Awesome @jarvisscript! I'm glad to see that it worked for you.

No problem, happy to share 🤙🏼

[Zeeshan]

Great Post!
The images make it so easy to understand. How did you create them?

[Luka Dušak]

Thanks a lot, @acidop!

I'm using VS Code and I would definitely recommend CodeSnap extension. It allows you to make great code screenshots with such ease.

The other image (the right one) is just a regular screenshot. And then I used Figma (my favorite design app) to merge these two images and add “➡️“ between.

I hope it helps ✌🏼

[Zeeshan]

Thanks a lot for the reply 🚀

[Sagnik Ghosh]

Please add Collapsible Items too in this Cheatsheet

[Luka Dušak]

Well, the only way to add collapsible items is to add them using HTML tags. I did write a little about HTML in general. But now I have also included it in this article as well as my PDF version ✌🏼