Courses/Markdown/Introduction to Markdown

Introduction to Markdown

Discover the simple formatting language that powers GitHub, documentation, and the modern web.

Our editor displays Markdown syntax as text output. To see rendered Markdown, try Dillinger.io or any Markdown editor like VS Code, Obsidian, or Typora.

What You'll Learn

What Markdown is and why it was created
Where Markdown is used in the real world
Basic syntax: headings, paragraphs, and emphasis
How Markdown compares to HTML

What Is Markdown?

Markdown is a lightweight markup language that lets you add formatting to plain text. Created by John Gruber in 2004, its goal was simple: make formatted text that's easy to read even in its raw form.

📝 Real-World Analogy: Think of Markdown like shorthand for a typesetter. Instead of writing complex HTML tags, you use simple symbols like # for headings and ** for bold. A Markdown processor then converts your shorthand into beautifully formatted HTML.

Why Developers Love Markdown

Readable — Raw Markdown is human-readable, unlike HTML
Fast — No mouse clicking; format as you type
Portable — Plain text works everywhere
Universal — GitHub, Slack, Discord, Notion all support it
Version-friendly — Git can track changes easily

Markdown vs HTML

Markdown	HTML	Result
# Hello	<h1>Hello</h1>	Hello
bold	<strong>bold</strong>	bold
italic	<em>italic</em>	italic
[link](url)	<a href="url">link</a>	link

What is Markdown?

Explore what Markdown is and where it's used.

Try it Yourself »

JavaScript

// Introduction to Markdown — rendered as text
console.log("=== What is Markdown? ===");
console.log();
console.log("Markdown is a lightweight markup language created by");
console.log("John Gruber in 2004. It lets you format plain text");
console.log("using simple symbols that are easy to read AND write.");
console.log();

console.log("=== Markdown vs HTML ===");
console.log("Markdown:  # Hello World");
console.log("HTML:      <h1>Hello World</h1>");
console.log();
console.log("Markdown:  **bol
...

Basic Syntax Overview

Headings

Use # symbols for headings. The number of # symbols determines the level (1–6):

# Heading 1 — Page Title
## Heading 2 — Section
### Heading 3 — Subsection
#### Heading 4 — Sub-subsection

Text Emphasis

**bold text**        → bold text
*italic text*        → italic text
***bold and italic***→ bold and italic
~~strikethrough~~    → strikethrough
`inline code`        → inline code

Blockquotes

> This is a blockquote.
> It can span multiple lines.
>
>> You can nest blockquotes too.

⚠️ Common Mistake

Forgetting the space after #. #Hello won't render as a heading — you need # Hello with a space. Similarly, **bold** needs no spaces inside the asterisks, but ** bold ** (with spaces) won't work in most parsers.

Basic Syntax

Review all the fundamental Markdown formatting symbols.