Complete Markdown guide
Tags: webdev, beginners, tutorial, productivity
Published: 2023-04-25 19:36:39

In this article, I want to show you how you can do basic formatting by adding a few punctuation characters.

## What is M↓?
Markdown is a markup language that you can use to add formatting to text documents. It is used everywhere, from comments, books, emails, to blog design, this article is formatted with markdown. It can be converted into HTML or other formats. Think of it as a streamlined, minimalist approach to web content creation that gives you the power to create stylish and engaging documents without getting bogged down in complicated code.
Markdown is portable, lightweight, platform independent and quick. You can format text without taking your hands off the keyboard, and this is very important! You can even don’t apply the formatting and the text will still be readable.
Again, the main idea is to add few characters to format your text, let’s dive in.

## Basic Markdown Syntax

### Headings
There six level of headings, from 1 (the largest) to 6 (smallest). Create headers by using the hash `#` symbol, followed by a space and your text. The number of hashes determines the header level. 
```
# First level heading
## Second level heading
```

# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6


### Emphasis. Bold and Italic

Add emphasis to your text using asterisks `*` or underscores `_` to make it bold or italic. 

```
*Italic text* or _Italic text_
**Bold text** or __Bold text__
***Bold and italic text*** or ___Bold and italic text___
```

- Italic `*Italic text*` or `_Italic text_`  *Italic text*
- Bold `**Bold text**` or `__Bold text__` **Bold text**
- Bold + Italic `*** Bold and italic text***` or `___ Bold and italic text___` ***Bold and italic text***

### Highlight and Strikethrough
Use double equals signs to ==highlight== text
```
==highlight==
```

Use double tildes `~` to ~~strikethrough~~ text
```
~~strikethrough~~
```

### Lists
You can create ordered (numbered) and unordered (bullet points) lists with or without task. Most programs support keeping a list creation after you move to a next line.

#### Unordered Lists
Or bullet list you can create by using asterisk `*`, hyphen `-`, or plus sign `+`, followed by a space.

```
- Bullet point 1
- Bullet point 2
```

#### Numbered Lists
Start with `1.` or with any number.

```
1. First item
2. Second item 
```

#### Task Lists
Type `- [ ]` or `1. [ ]` then a space. By adding an `x` into the brackets you can set task complete or incomplete. 

```
- [ ] Unordered incomplete task list item
1. [x] Numbered completed task list item
```

Our plan:
1. [x] What is M↓?
2. [ ] Basic Markdown Syntax
	3. [x] Headings
	4. [x] Emphasis. Bold and Italic
	5. [x] Highlight and Strikethrough
	6. [x] Lists
		- [x] Unordered lists
		- [x] Numbered lists
		- [x] Task lists
	1. [ ] Blockquotes
	2. [ ] Links and Images
	3. [ ] Code and Codeblocks
4. [ ] Advanced Markdown Syntax
	5. [ ] Tables
	6. [ ] Horizontal lines
	7. [ ] Escaping characters
	8. [ ] Footnote
	9. [ ] Comments
	10. [ ] Metadata
11. [ ] Useful Tools and Apps
12. [ ] Ready, Set, Markdown!

As you can see, you can nest lists and combine them. Don't worry about numbering going off during editing, everything will be fine in reader mode.

### Blockquotes
Add a space after `>` to quote.
```
> This is the blockquote.
>> Double indented
```

> Different isn’t always better but better is always different!

— Author Unknown

### Links and Images
#### Links
Use the formula `[Link text](Link url)` to add links. [Open Google](https://www.bing.com)

#### Images
Add an exclamation mark to render both, web and local image
```
‌![Description](https://www.example.com/image.jpg)
```


### Code and Codeblocks
#### Code
Include inline code by wrapping it in backticks. For example, press `ctrl`+`B` to make text bold

#### Codeblocks
Add the language name after the triple backticks to enable Syntax highlighting. *Does not work with all editors!* 

```python
def hello_world():
    print("Hello, World!")
```

## Advanced Markdown Syntax
### Tables
Create tables using pipes `|` and hyphens `‌-`. The header row is separated from the content by a line of hyphens and pipes. Each column in the row is separated by `|`.
You can apply other markdown formatting.

```
Header 1 | Header 2
---|---
Row 1 | Row 2
```

Row alignment

 **Text Align** | **Action** 
---:|---
 Left | Used by default. Wrap colon `:` horizontal line on the left side
 Center | Wrap colon `:` horizontal line on both sides 
 Right | Wrap colon `:` horizontal line on the right side 
 
### Horizontal lines
Create horizontal rules using three or more hyphens `---`, asterisks `***`, or underscores `___` on a separate line.

```
How cool is that?
___
The reverse side of the coin
```
 
### Escaping characters
If you want to add a formatting character as a text, type a backslash first `\`. This means `\*` gives `*`, `\_` gives `_` etc.
*Escaping does not work with backtick character.*

### Footnote
>**!** Some Markdown parsers does not offer additional features, such as Task Lists, Footnotes, and Strikethrough text. Check your parser's documentation to see which features are supported.

```
Some body[^1] once told me…

[^1]: A linked footnote that will be at the bottom of the document.
```

To add Wikipedia[^1] like footnote use square brackets preceded by a caret. Then add the footnote content like a reference link, for example.

[^1]: Means https://en.wikipedia.org/

### Commets
Markdown does not provide support for comments, but many editors do. *Each has a different format.*

### Metadata or Frontmatter
Frontmatter is a way to identify metadata in Markdown files. Metadata can literally be anything you want it to be, but often it's used for data elements your page needs and you don't want to show directly.

```
---
type: book
start-date: 2023-01-01
finish-date: 2023-03-22
---
```

## Useful Tools and Apps

Here's an list of tools and apps that make working with Markdown even more enjoyable:

- Text editors: iA Writer ❤️, Sublime Text, Atom, Visual Studio Code, Vim ❤️, Emacs, Notepad++, BBEdit, Ulysses, LightPaper, TextMate, Byword, Brackets.
- Markdown previewers: Marked 2, Typora, Dillinger, StackEdit, Remarkable, Pandoc, Haroopad, MacDown, Abricotine, ReText.
- Note-taking apps: Bear, Simplenote, Joplin, Evernote, Quiver, Zettlr, Turtl, Boostnote, Notable, Inkdrop, Standard Notes, Obsidian ❤️.
- Documentation and collaboration tools: GitHub, GitLab, Bitbucket, HackMD, Notion, Dropbox Paper, Slite, Confluence, BookStack, Docusaurus, MkDocs.

## Ready, Set, Markdown!
You're now equipped with the knowledge to create beautiful, engaging documents using Markdown. Go ahead, unleash your creativity and let your words flow with style. Happy writing!

### P.S.
Would you like more guides like this or would you like to share your knowledge? Welcome to the digital community of creators, see https://dev.to/ytskk/lets-create-developers-community-5g1o for details.