DEV Community

loading...
Cover image for Super Simple Markdown

Super Simple Markdown

awwsmm profile image Andrew (he/him) ・3 min read

Markdown is the language of DEV posts, and is a super-lightweight way to add some pizzazz to your plaintext. It consists of a few easy-to-remember (and easy-to-type) shortcuts. If you're learning Markdown for the first time (or just have trouble remembering what does what) bookmark this cheat sheet and come back to it as necessary.


Common Formatting


To make text italic

...use _single underscores_ or *single asterisks*
Enter fullscreen mode Exit fullscreen mode

To make text bold

...use __double underscores__ or **double asterisks**
Enter fullscreen mode Exit fullscreen mode

To make text bold and italic

...use __*asterisks in double underscores*__,
       **_underscores in double asterisks_**,
       _**double asterisks in underscores**_, or
       *__double underscores in asterisks__*
Enter fullscreen mode Exit fullscreen mode

To add inline code

...use `single backticks`
Enter fullscreen mode Exit fullscreen mode

To add

a code
block
Enter fullscreen mode Exit fullscreen mode

use

```
triple
backticks
```
Enter fullscreen mode Exit fullscreen mode

or

    indent
    four
    spaces
1234
Enter fullscreen mode Exit fullscreen mode

To add

Headings

of various

sizes

use

# one
## or more
### octothorpes
Enter fullscreen mode Exit fullscreen mode

To add horizontal rules (like the one above), write three or more hyphens in a row:

---
Enter fullscreen mode Exit fullscreen mode

  1. To create
  2. ordered lists
  3. of items
1. simply write
1. "1. " before
1. each item
Enter fullscreen mode Exit fullscreen mode

  • To create
  • unordered lists
  • of items
- simply write
- "- " before
- each item
Enter fullscreen mode Exit fullscreen mode

  1. Create sublists
    • by indenting
      1. four spaces
        • for each level
1. Create sublists
    - by indenting
        1. four spaces
            - for each level
Enter fullscreen mode Exit fullscreen mode

To create a hyperlink

put the [link text in square braces](https://timecube.2enp.com/)
(followed by the URL in parentheses)
Enter fullscreen mode Exit fullscreen mode

To create a blockquote

> begin the quote with "> "
Enter fullscreen mode Exit fullscreen mode

To strikethrough text

use ~~double~~ tildes
Enter fullscreen mode Exit fullscreen mode

To add an inline image

Trogdor, the Burninator

Use the same syntax as for a hyperlink, but prepend a '!':

![Trogdor, the Burninator](https://dev-to-uploads.s3.amazonaws.com/i/sguw2x61byhenjclhmmj.png)
Enter fullscreen mode Exit fullscreen mode

pssst hey kid, want some

Super Secret Markdown Tips (They* don't want you to know about!)


Need to write a literal *, _, etc. character?

Escape them by preceding them with backslashes: \*, \_


Need to put backticks inside inline code?

Use double-backticks `with backticks` inside

``Use double-backticks `with backticks` inside``
Enter fullscreen mode Exit fullscreen mode

Need to put triple-backticks inside a code block?

```
indent four spaces
and then add the backticks
```
Enter fullscreen mode Exit fullscreen mode

    ```
    indent four spaces
    and then add the backticks
    ```


Need to put a code block in a list?

  1. Just make sure
  2. To indent

    four
    spaces
    
  3. to keep the numbering contiguous

    1. Just make sure
    1. To indent


        ```
        four
        spaces
        ```


    1. to keep the numbering contiguous

Need to put a block of code in a blockquote?

You might want to do something like

small bug on DEV.to -- first line is indented one space
val x = 42
val y = 42 * 19

...just make sure you start each line with "> "

> You might want to do something like
> 
>     small bug on DEV.to -- first line is indented one space
>     val x = 42
>     val y = 42 * 19
> 
> ...just make sure you start each line with "> "

Need fancy syntax highlighting to impress your friends and frighten your enemies?

def foo (val bar: Int, baz: Double): String = { ... }
Enter fullscreen mode Exit fullscreen mode

Just put the name of the programming language after the initial ```:

```scala
def foo (val bar: Int, baz: Double): String = { ... }
```
Enter fullscreen mode Exit fullscreen mode

Got any tough Markdown problems you need help solving? Got any tips or tricks for those new to the (plaintext formatting syntax) game? Let me know in the comments below!

* The Markdown Illuminati, not to be confused with the Marky Mark Illuminati

Discussion (9)

pic
Editor guide
Collapse
katieadamsdev profile image
Katie Adams

I'll be sharing this post with my non-coder friends too. Markdown is used in the Discord message feature, among other applications so everyone would benefit from knowing how it works a little. Great post! Really beginner friendly. 😊

Collapse
michaeltharrington profile image
Michael Tharrington (he/him) • Edited

As a non-coder who had to still has to reference quite a few Markdown cheat sheets, I'm sure folks will appreciate that!

And awwsmm post, Andrew! Bookmarked. 😀

Collapse
bayuangora profile image
Bayu Angora

WhatsApp uses that asterik and underscore too for bold and italic.

Collapse
gugacavalieri profile image
Guga Cavalieri

Good stuff! Markdown is so useful and easy to write. It can be used by people who don't code as well :)

Collapse
gauthamp10 profile image
Collapse
ad0791 profile image
Alexandro Disla

Tu as un phd. Maintenant tu codes sur quoi?

Collapse
awwsmm profile image
Andrew (he/him) Author

Je travaille pour une entreprise appelée Workday. L'entreprise crée des microservices pour la gestion des ressources humaines et financières. Je travaille sur l'algorithme de planification des jobs au sein du département "core services".

Collapse
ad0791 profile image
Alexandro Disla

Wow, je suis economiste-statisticien. Je connais R, je fais ma thèse de license avec en Haïti.
Je souhaiterais bien faire le grand saut, j’y travailles pour. Javascript et python, j’apprends aussi la science des données. Un jour j’espère reussir à faire quelque chose de ma vie avec. Keep going!!!

Collapse
vuelancer profile image
Vuelancer
  • I have created a youtube video as a markdown tutorial!
  • Video Link
  • If you like it, share it with your frnds!