DEV Community

The Only Markdown Cheatsheet You Will Ever Need

Luka Dušak on January 15, 2023

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 p...
Collapse
 
oliie profile image
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
Enter fullscreen mode Exit fullscreen mode

will show as:

1. Foo
2. Bar
3. Baz
Enter fullscreen mode Exit fullscreen mode
Collapse
 
imluka profile image
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
Enter fullscreen mode Exit fullscreen mode

would be:

3. Typescript
4. React
5. Tailwind
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andre_adpc profile image
Andre Du Plessis • Edited

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__
Enter fullscreen mode Exit fullscreen mode

Use:
My Underlined Text

<u>My Underlined Text</u>

Underline Italics

underline italics ( Not flying here ... )

__*underline italics*__
Enter fullscreen mode Exit fullscreen mode

Use:
My Underlined Italics Text

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

Underline Bold

__**underline bold**__ ( Not flying here ... )
Enter fullscreen mode Exit fullscreen mode

Use:
My Underline Bold Text

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

Underline Bold Italics

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

Enter fullscreen mode Exit fullscreen mode

Use:
My Underlined Bold Italic Text

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

Underline Strikethrough

__~~Strikethrough~~__ ( Not flying here ... )
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
 
imluka profile image
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 ✌🏼

Collapse
 
loebkes profile image
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!

Collapse
 
andre_adpc profile image
Andre Du Plessis

This is a great tip about Mermaid, thanks Ludwig!

Collapse
 
imluka profile image
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!

Collapse
 
miguelmj profile image
MiguelMJ

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

Collapse
 
imluka profile image
Luka Dušak • Edited

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

Collapse
 
miguelmj profile image
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.

Thread Thread
 
imluka profile image
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
Enter fullscreen mode Exit fullscreen mode

I hope it helps ✌🏼

Collapse
 
adriens profile image
adriens

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

Collapse
 
imluka profile image
Luka Dušak

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

Collapse
 
adriens profile image
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

Thread Thread
 
imluka profile image
Luka Dušak

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

Collapse
 
dmacan23 profile image
David Macan

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

Collapse
 
johannes_k_rexx profile image
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.

Collapse
 
imluka profile image
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 🔥

Collapse
 
imluka profile image
Luka Dušak • Edited

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

Collapse
 
oliie profile image
Oliver Praesto

This works in VS Code already! 🔥

Collapse
 
matija2209 profile image
matija2209

Thanks. That's actually useful.

Collapse
 
imluka profile image
Luka Dušak

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

Collapse
 
jarvisscript profile image
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.

Collapse
 
imluka profile image
Luka Dušak

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

No problem, happy to share 🤙🏼

Collapse
 
acidop profile image
Zeeshan

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

Collapse
 
imluka profile image
Luka Dušak • Edited

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 ✌🏼

Collapse
 
acidop profile image
Zeeshan

Thanks a lot for the reply 🚀

Collapse
 
sagnikghoshcr7 profile image
Sagnik Ghosh

Please add Collapsible Items too in this Cheatsheet

Collapse
 
imluka profile image
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 ✌🏼

Collapse
 
agedus profile image
Bas Top

Realy nice. I have also one of my own that I use for when I make notes or make readme`s. But there are some more things on here I did not now yet.

Collapse
 
imluka profile image
Luka Dušak

Thanks @agedus!

That's awesome! I'm really glad you could find something new here and include it in your own version ✌🏼

Collapse
 
stefaniefluin profile image
Stefanie Fluin

Oooo! Header IDs and highlighting text was new to me. Very nice summary 👌

Collapse
 
imluka profile image
Luka Dušak

Great, thanks @stefaniefluin! Very glad to hear that ✌🏼

Collapse
 
hellonearthis profile image
Brett Cooper

It's not really a cheatsheet if it can't be printed onto one sheet of A4 paper.

Collapse
 
imluka profile image
Luka Dušak

Well, I understand what you mean. But I wanted to include more examples. I feel that would benefit most of the people. Currently working on a PDF version that I'm also going to post, so you can check that up!

Collapse
 
mneme profile image
Alex T • Edited

thank you so much! every time I had to google for markdown whenever I needed to use. it is a great saviour!

Collapse
 
imluka profile image
Luka Dušak

No problem @mneme. I'm happy to read that you find it helpful!

Collapse
 
martydevs profile image
Andre Marti

when i was discovering Markdown, for coding projects, I lef MS Word, makes you productive and let you straight in your articles.

If I would drop an aportation in this article, I create a documentation maded with a markdown library named material mkdocs with python and markdown with material styled UI for a Visual Basic Desktop App; Also this documentation is hosted with Gh pages