Published on May 1, 2021

Introduction to Markdown

Markdown is a lightweight markup language created by John Gruber and Aaron Swartz in 2004. It's designed to be easy to read and write, making it an excellent choice for formatting text on the web, especially in documentation, blogs, and emails.

Introduction to Markdown

Introduction to Markdown

Markdown is a lightweight markup language created by John Gruber and Aaron Swartz in 2004. It's designed to be easy to read and write, making it an excellent choice for formatting text on the web, especially in documentation, blogs, and emails. Markdown allows you to format text using plain text syntax, which can be easily converted to HTML or other formats. In this article, we'll explore Markdown syntax, complete with examples, so you can get started creating beautifully formatted documents in no time.

Table of Contents

  1. Getting Started with Markdown
  2. Headers
  3. Emphasis
  4. Lists
  5. Links
  6. Images
  7. Blockquotes
  8. Code
  9. Tables
  10. Horizontal Rules
  11. Inline HTML
  12. Escaping Characters
  13. Extended Syntax
  14. Conclusion

Getting Started with Markdown

To start writing in Markdown, all you need is a text editor. Markdown files typically have a .md or .markdown extension. Here’s a simple example:

# Hello, Markdown!
This is a paragraph in Markdown.

Headers

Headers in Markdown are created by using the # symbol followed by a space. The number of # symbols indicates the header level.

Example:

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

This renders as:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Emphasis

You can add bold and italic text in Markdown using asterisks (*) or underscores (_).

Examples:

  • Bold: **Bold** or __Bold__
  • Italic: *Italic* or _Italic_
  • Bold and Italic: ***Bold and Italic*** or ___Bold and Italic___

Lists

Markdown supports both ordered and unordered lists.

Unordered Lists

Unordered lists use dashes (-), plus signs (+), or asterisks (*) as list markers.

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
+ Item 3

Ordered Lists

Ordered lists use numbers followed by a period.

1. First item
2. Second item
3. Third item
   1. Subitem 3.1
   2. Subitem 3.2

Links

Creating links is simple in Markdown. You use the syntax [text](URL).

Example:

[OpenAI](https://www.openai.com)

This renders as: OpenAI

You can also add a title attribute, which appears when you hover over the link:

[OpenAI](https://www.openai.com "Visit OpenAI")

Images

To insert an image, use the same syntax as links, but add an exclamation mark ! at the beginning.

Example:

![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg "Markdown Logo")

This displays as:

Markdown Logo

Blockquotes

Blockquotes are created with the > symbol.

Example:

> This is a blockquote in Markdown.

This renders as:

This is a blockquote in Markdown.

You can nest blockquotes by adding additional > symbols:

> This is a quote.
> > This is a nested quote.

This renders as:

This is a quote.

This is a nested quote.

Code

You can add inline code with backticks ` like this: inline code. For code blocks, you can use triple backticks (```) or indent with four spaces.

Inline Code Example

Here is some `inline code`.

This renders as: Here is some inline code.

Code Block Example

function hello() {
    console.log("Hello, Markdown!");
}

This renders as:

function hello() {
    console.log("Hello, Markdown!");
}

Tables

Tables are a great way to display data in Markdown. Use pipes | and dashes - to structure your table.

Example:

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

This renders as:

SyntaxDescription
HeaderTitle
ParagraphText

You can also align the text in each column by adding colons:

| Left Align  | Center Align  | Right Align |
| :---------- | :-----------: | ----------: |
| Item 1      |    Center     |      Right  |
| Item 2      |    Center     |      Right  |

Horizontal Rules

A horizontal rule can be created using three or more dashes, asterisks, or underscores.

---
***
___

This renders as:

Inline HTML

If you need more control over your document, you can include HTML directly in your Markdown.

Example:

<p style="color:blue;">This is a paragraph in blue text.</p>

This renders as:

This is a paragraph in blue text.

Escaping Characters

To display special characters like *, _, #, etc., use a backslash \ before the character.

Example:

\*This text is not italic\*

This renders as:

*This text is not italic*

Extended Syntax

Some Markdown processors, like GitHub Flavored Markdown (GFM), support extended syntax like task lists, strikethrough, and tables.

Task Lists

You can create a task list using - [ ] for unchecked items and - [x] for checked items.

- [x] Completed Task
- [ ] Incomplete Task

This renders as:

  • Completed Task
  • Incomplete Task

Strikethrough

You can add strikethrough text by wrapping it in double tildes ~~.

~~This is strikethrough text~~

This renders as:

This is strikethrough text

Conclusion

Markdown is a powerful tool for formatting text in a simple and readable way. With support for headers, lists, links, images, blockquotes, code, tables, and more, Markdown is ideal for creating structured documents without the need for complex formatting.

Explore Markdown further and try out these formatting techniques in your next project. Happy writing in Markdown!