DEV Community

Cover image for Complete Markdown guide
Andrey
Andrey

Posted on

Complete Markdown guide

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

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___
Enter fullscreen mode Exit fullscreen mode
  • 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==
Enter fullscreen mode Exit fullscreen mode

Use double tildes ~ to strikethrough text

~~strikethrough~~
Enter fullscreen mode Exit fullscreen mode

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

Numbered Lists

Start with 1. or with any number.

1. First item
2. Second item 
Enter fullscreen mode Exit fullscreen mode

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

Our plan:

  1. [x] What is M↓?
  2. [ ] Basic Markdown Syntax
    1. [x] Headings
    2. [x] Emphasis. Bold and Italic
    3. [x] Highlight and Strikethrough
    4. [x] Lists
      • [x] Unordered lists
      • [x] Numbered lists
      • [x] Task lists
    5. [ ] Blockquotes
    6. [ ] Links and Images
    7. [ ] Code and Codeblocks
  3. [ ] Advanced Markdown Syntax
    1. [ ] Tables
    2. [ ] Horizontal lines
    3. [ ] Escaping characters
    4. [ ] Footnote
    5. [ ] Comments
    6. [ ] Metadata
  4. [ ] Useful Tools and Apps
  5. [ ] 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
Enter fullscreen mode Exit fullscreen mode

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

Images

Add an exclamation mark to render both, web and local image

‌![Description](https://www.example.com/image.jpg)
Enter fullscreen mode Exit fullscreen mode

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!

def hello_world():
    print("Hello, World!")
Enter fullscreen mode Exit fullscreen mode

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

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

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…

Enter fullscreen mode Exit fullscreen mode

To add Wikipedia1 like footnote use square brackets preceded by a caret. Then add the footnote content like a reference link, for example.

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

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.


  1. Means https://en.wikipedia.org/ 

Top comments (0)