DEV Community

Paul J. Williams
Paul J. Williams

Posted on • Edited on

Basic Markdown tutorial

Basic Markdown Tutorial

Markdown is a lightweight markup language. It uses simple and intuitive elements to format text, making it easy to use and to read. This tutorial includes enough syntax to get started using Markdown.

Contents

  1. Headings
  2. Paragraphs
  3. Line Breaks
  4. Emphasis
  5. Blockquotes
  6. Lists
  7. Code
  8. Horizontal Rules
  9. Links
  10. Images
  11. Escaping Characters
  12. HTML

1. Headings

Markdown recognizes six levels of headings. Make headings by preceding them with between one and six hashes (#):

# Heading Level One
## Heading Level Two
### Heading Level Three
#### Heading Level Four
##### Heading Level Five
###### Heading Level Six
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five
Heading Level Six

2. Paragraphs

Make separate paragraphs by including a blank line between them:

This is a paragraph.

This is another paragraph.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is a paragraph.

This is another paragraph.

3. Line Breaks

Make line breaks by adding two or more spaces to the end of a line:

This is a line of text followed by two spaces.  
This is another line of text.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is a line of text followed by two spaces.
This is another line of text.

4. Emphasis

Bold

Make text bold by surrounding it with two asterisks on each side:

This is an example of **bold** text.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is an example of bold text.

Italics

Make text italicized by surrounding it with one asterisk on each side:

This is an example of *italicized* text.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is an example of italicized text.

5. Blockquotes

Make a blockquote by adding a greater-than sign (>) in front of a paragraph:

> This is an example of a blockquote.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is an example of a blockquote.

6. Lists

Ordered Lists

Make ordered lists by adding a number followed by a period and a space before each list item:

1. The first list item must start with a one.   
7. Subsequent list items may start with any number.
    1. Add nested list items by preceding them with a tab or four spaces.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

  1. The first list item must start with a one.
  2. Subsequent list items may start with any number.
    1. Add nested list items by preceding them with a tab or four spaces.

Unordered Lists

Make unordered lists by adding an asterisk and a space before each list item:

* This is the first list item.
* This is the second list item.
    * Add nested list items by preceding them with a tab or four spaces.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

  • This is the first list item.
  • This is the second list item.
    • Add nested list items by preceding them with a tab or four spaces.

7. Code

Insert code into your text by enclosing it in backticks (``):

`This is a line of code.`
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This is a line of code.

Code Blocks

Insert code blocks by preceding each line of code with a tab or four spaces:

    These are
    multiple lines
    of code.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

These are
multiple lines
of code.
Enter fullscreen mode Exit fullscreen mode

8. Horizontal Rules

Make a horizontal rule with three or more asterisks, dashes, or underscores:

***
---
___
Enter fullscreen mode Exit fullscreen mode

The formatted line will look like this:


9. Links

Make text into a link by surrounding it in brackets followed by the URL enclosed in parentheses:

John Gruber's original guide to Markdown can be found [here](https://daringfireball.net/projects/markdown/).
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

John Gruber's original guide to Markdown can be found here.

10. Images

Add an image with an exclamation mark (!) followed by the alt text in brackets and the path or URL to the image in parentheses:

![Portland Bridges](https://dev-to-uploads.s3.amazonaws.com/i/yzam5hhx8968oiaf3q40.jpg)
Enter fullscreen mode Exit fullscreen mode

The formatted image will look like this:

Portland Bridges

11. Escaping Characters

Make a character display that would otherwise be used to format text in Markdown by preceding the character with a backslash (\):

\*Without the backslashes, this text would render in italics.\*
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

*Without the backslashes, this text would render in italics.*

12. HTML

Use HTML in your Markdown-formatted document by enclosing the relevant text in HTML tags:

This sentence uses both **Markdown** and <strong>HTML</strong>.
Enter fullscreen mode Exit fullscreen mode

The formatted text will look like this:

This sentence uses both Markdown and HTML.

Top comments (0)