📝 Mastering Markdown — 100% Complete Tutorial

>>Markdown is not just a format — it's a philosophy: write once, render anywhere.

🧭 1. What Is Markdown?

Markdown is a lightweight markup language created by John Gruber in 2004. It lets you write plain text using simple symbols that convert to beautifully formatted HTML — no rich text editor required.

It's used everywhere: GitHub, Notion, Reddit, Discord, documentation sites, README files, and blogs. If you write on the internet, you'll write Markdown.

Note

💡 Markdown files use the .md or .markdown extension and can be rendered by any Markdown-aware tool or platform.

🔄 2. How Markdown Converts to HTML

Understanding the conversion model helps you predict how your Markdown will render. A Markdown parser reads your plain text and outputs equivalent HTML tags.

Markdown Input

# Hello World

This is a **paragraph** with _italic_ text.

- Item one
- Item two

HTML Output (what the parser generates)

<h1>Hello World</h1>

<p>This is a <strong>paragraph</strong> with <em>italic</em> text.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Note

🧠 Every Markdown element maps to an HTML tag. When something doesn't render as expected, think about what HTML tag it should produce — that clue usually reveals the fix.

📌 3. Headings

Headings are created using the # symbol. The number of # symbols determines the heading level — from 1 (largest) to 6 (smallest).

ATX-Style Headings (Recommended)

# H1 — Main Title
## H2 — Section
### H3 — Subsection
#### H4
##### H5
###### H6 — Smallest heading

Note

⚠️ Always leave a space after the # symbol.#Heading won't render — # Heading will.

3.1 Alternative Style (Setext)

You can underline text with === for H1 or --- for H2:

Setext Headings

My Title
========

My Subtitle
-----------

3.2 Heading Anchors & Internal Links

Most renderers automatically generate an anchor ID for each heading, allowing you to link to sections within the same document. The ID is the heading text lowercased, with spaces replaced by hyphens and special characters removed.

Internal Anchor Links

## My Section Title
<!-- Auto-generates: id="my-section-title" -->

<!-- Link to it from anywhere in the doc: -->
[Jump to My Section](#my-section-title)

<!-- Multi-word with special chars: -->
## Getting Started (v2)
<!-- ID becomes: getting-started-v2 -->
[Go to Getting Started](#getting-started-v2)

Heading Text	Generated ID
Introduction	introduction
Getting Started	getting-started
FAQ & Help	faq--help
Step 1: Install	step-1-install

✍️ 4. Emphasis & Text Styling

Markdown supports bold, italic, bold-italic, and ~~strikethrough~~ formatting inline.

Emphasis Syntax

**Bold text**
__Also bold__

*Italic text*
_Also italic_

***Bold and italic***

~~Strikethrough~~

Syntax	Output	Notes
text	Bold	Double asterisks
text	Italic	Single asterisk
*text*	*Bold Italic*	Triple asterisks
~~text~~	~~Strikethrough~~	Double tildes (GFM)

📋 5. Lists

5.1 Unordered Lists

Use -, *, or + as bullet markers. They are interchangeable. Indent with 2 spaces to create nested items.

Unordered List

- Item one
- Item two
  - Nested item
  - Another nested item
- Item three

5.2 Ordered Lists

Use numbers followed by a period. The actual numbers don't matter — Markdown counts for you automatically.

Ordered List

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

5.3 Nested Mixed Lists

You can nest ordered and unordered lists inside each other freely. Indent by 2–4 spaces to create a child level.

Mixed Nested Lists

1. Frontend
   - HTML
   - CSS
     - Flexbox
     - Grid
   - JavaScript
2. Backend
   - Node.js
   - Python
     1. Django
     2. FastAPI

5.4 List Continuation Paragraphs (Loose Lists)

When list items are separated by blank lines, they become a loose list — each item wraps its content in a <p> tag. You can also add continuation paragraphs to a list item by indenting them.

List with Continuation Paragraphs

- First item

  This paragraph is still part of the first item (indented 2 spaces).

- Second item

  Another paragraph continuing the second item.

  > Even blockquotes can continue a list item.

Note

🧠 A tight list has no blank lines between items. A loose list has blank lines — each item renders wrapped in <p> tags.

5.5 Task Lists (GFM)

GitHub-Flavored Markdown supports checkboxes using - [ ] (unchecked) and - [x] (checked).

Task / Checklist

- [x] Set up project structure
- [x] Write documentation
- [ ] Add unit tests
- [ ] Deploy to production

🔗 6. Links & Images

6.1 Inline Links

Inline Link

[Link text](https://example.com)
[Link with tooltip](https://example.com "Hover title")

6.2 Reference Links

Keep long URLs out of your prose using reference-style links. Define references anywhere in the document.

Reference Links

Visit [Google][1] or check [MDN Docs][mdn] for reference.

[1]: https://google.com
[mdn]: https://developer.mozilla.org "MDN Web Docs"

6.3 Images

Images use the same syntax as links but prefixed with !:

Image Syntax

![Alt text](https://example.com/image.png)
![Alt text](./local-image.png "Optional title")

<!-- Reference style -->
![Logo][logo]
[logo]: https://example.com/logo.png

6.4 Clickable Images (Image + Link)

Wrap an image in a link to make it clickable — nest the image syntax inside the link syntax:

Clickable Image

[![Alt text](image.png)](https://example.com)

<!-- Reference style clickable image -->
[![Logo][logo-img]][homepage]

[logo-img]: https://example.com/logo.png
[homepage]: https://example.com

6.5 Image Sizing (via HTML)

Markdown has no native size control for images. Use an HTML <img> tag inline to set width and height:

Image with Custom Size

<img src="image.png" alt="Description" width="300" height="200" />

<!-- Percentage width -->
<img src="banner.png" alt="Banner" width="100%" />

<!-- Centered image -->
<div align="center">
  <img src="logo.png" alt="Logo" width="150" />
</div>

Note

💡 Alt text is critical for accessibility and SEO. Always describe the image meaningfully.

💻 7. Code

7.1 Inline Code

Wrap code in single backticks to render inline. For code that contains a backtick itself, use double backticks as the delimiter.

Inline Code

Use the `console.log()` method to debug.
Press `Ctrl + C` to copy.

<!-- If your code contains a backtick: -->
`` Use `backtick` here ``

7.2 Fenced Code Blocks (Backtick Style)

Use triple backticks ``` to open and close a fenced block. Add a language identifier immediately after the opening backticks to enable syntax highlighting.

Fenced Code Block

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));
```

7.3 Fenced Code Blocks (Tilde Style)

Tildes ~~~ are an alternative fence delimiter — useful when your code contains triple backticks, since the delimiters don't conflict.

Tilde Fenced Block

~~~python
def hello(name):
    print(f"Hello, {name}!")

hello("World")
~~~

Note

🔥 Tilde fences are especially handy when documenting Markdown itself — you can show backtick code fences inside a tilde fence without escaping.

7.4 Indented Code Blocks (Legacy)

Indent lines with 4 spaces or 1 tab. This is the original Markdown spec style — fenced blocks are preferred in modern usage.

Indented Code Block

This is a code block
    via 4-space indentation

7.5 Common Language Identifiers

Language	Identifier	Language	Identifier
JavaScript	js	TypeScript	ts
Python	python	Bash / Shell	bash
HTML	html	CSS	css
JSON	json	YAML	yaml
Markdown	md	SQL	sql
Rust	rust	Go	go
Java	java	C / C++	c / cpp
Ruby	ruby	PHP	php
Swift	swift	Kotlin	kotlin
Dockerfile	dockerfile	TOML	toml

📊 8. Tables (GFM)

Tables are created using pipe | characters and hyphens - for the header separator row. At least three hyphens per column are required.

Basic Table

| Name     | Role        | Language   |
|----------|-------------|------------|
| Alice    | Frontend    | JavaScript |
| Bob      | Backend     | Python     |
| Charlie  | DevOps      | Bash       |

8.1 Column Alignment

Column Alignment

| Left       | Center      | Right      |
|:-----------|:-----------:|-----------:|
| aligned    | centered    |      right |
| text       | text        |       text |

Separator Syntax	Alignment
:--- or ---	Left (default)
:---:	Center
---:	Right

Note

🔥 Tables are a GFM extension. They render on GitHub, VS Code, Notion, and Obsidian — but may not work in all basic parsers. Outer pipes (|) are optional but recommended for readability.

📣 9. Blockquotes

Start a line with > to create a blockquote. Nest them by adding more > symbols. Blockquotes can contain other Markdown elements.

Simple & Nested Blockquotes

> This is a blockquote.
> It can span multiple lines.

> Outer quote
>> Nested quote
>>> Deeply nested quote

9.1 Blockquotes with Markdown Inside

Blockquotes can contain headings, lists, code, and more:

Rich Blockquote Content

> ### 💡 Pro Tip
> Use **blockquotes** to highlight important sections.
>
> - They support lists
> - And `inline code` too
>
> ```bash
> echo "Even code blocks work inside blockquotes"
> ```

➖ 10. Horizontal Rules

Create a thematic break / divider using three or more ---, ***, or ___ on their own line.

Horizontal Rules

---

***

___

- - -      <!-- spaces are allowed -->
* * *

Note

⚠️ Leave a blank line before --- when it follows a paragraph. Without it, the paragraph is interpreted as a Setext H2 heading instead.

🏃 11. Paragraphs & Line Breaks

Separate paragraphs with a blank line. A single newline does not create a new paragraph — it is treated as a continuation of the same block.

Paragraphs & Line Breaks

This is paragraph one.

This is paragraph two (blank line above creates separation).

Line one.  
Line two — two trailing spaces before newline forces a <br>.

Or use a backslash:\
This also starts a new line (cleaner, more explicit).

Note

⚠️ Two trailing spaces before a newline force a <br> tag. Since trailing spaces are invisible in most editors, use a backslash \ at end of line instead.

🔠 12. Escaping Characters

Use a backslash \ before any special Markdown character to render it literally instead of being interpreted as formatting syntax.

Escape Sequences

\*Not italic\*
\# Not a heading
\[Not a link\]
\`Not code\`
\**Not bold\**
\> Not a blockquote

Character	Name	Character	Name
\	Backslash	{ }	Curly braces
`	Backtick	[ ]	Square brackets
*	Asterisk	( )	Parentheses
_	Underscore	#	Hash / Pound
+	Plus	-	Hyphen
.	Period	!	Exclamation
\|	Pipe	~	Tilde

🌐 13. HTML in Markdown

13.1 Inline HTML Elements

Most Markdown parsers allow raw HTML inline. Use it for features Markdown can't express natively — like collapsible sections, keyboard keys, or custom sizing.

Inline HTML Examples

<!-- Collapsible section -->
<details>
  <summary>Click to expand</summary>
  Hidden content goes here.
</details>

<!-- Keyboard shortcuts -->
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<!-- Highlighted text -->
<mark>Highlighted text</mark>

<!-- Sub & superscript -->
H<sub>2</sub>O  and  E = mc<sup>2</sup>

<!-- Centered content -->
<div align="center">Centered text or image</div>

13.2 HTML Entities

HTML entities let you render special characters that would otherwise be interpreted as Markdown syntax or are not easily typeable:

HTML Entities in Markdown

&amp;    → &
&lt;     → <
&gt;     → >
&nbsp;   → non-breaking space
&copy;   → ©
&reg;    → ®
&trade;  → ™
&mdash;  → —  (em dash)
&ndash;  → –  (en dash)
&ldquo;  → "  (left double quote)
&rdquo;  → "  (right double quote)
&#9733;  → ★  (star, via numeric code)

13.3 HTML Comments

Standard HTML comments work inside Markdown files and are stripped from the rendered output — useful for notes, TODOs, or temporarily hiding content:

Markdown Comments

<!-- This comment won't appear in the rendered output -->

<!-- TODO: add more examples here -->

<!-- 
  Multi-line comments work too.
  Great for longer notes or disabling sections.
-->

Visible paragraph.

<!-- <hidden>This whole section is disabled</hidden> -->

Note

💡 HTML comments are the only way to add invisible notes to a Markdown file. They're stripped by every major renderer.

🧩 14. Extended Syntax

14.1 Footnotes

Supported by Pandoc, MultiMarkdown, Obsidian, and many static site generators. Reference a footnote inline and define its content anywhere in the document.

Footnotes

Here is a statement with a footnote.[^1]
Another sentence.[^note]

[^1]: This is the first footnote content.
[^note]: Footnotes can have descriptive keys.
         Indent continuation lines by 4 spaces.

14.2 Definition Lists

Definition List

Term
: Definition of the term

Markdown
: A lightweight markup language for formatting plain text

API
: Application Programming Interface
: A set of rules for how software components communicate

14.3 Abbreviations

Define abbreviations once — every occurrence in the document gets an automatic tooltip (renders as an <abbr> tag). Supported by Python-Markdown and some others.

Abbreviations

The HTML specification is maintained by the W3C.

*[HTML]: HyperText Markup Language
*[W3C]: World Wide Web Consortium

14.4 Highlight Text

Highlighted Text

I need to ==highlight this== word.

14.5 Subscript & Superscript

Sub & Superscript

H~2~O        <!-- subscript  → H₂O -->
E = mc^2^    <!-- superscript → mc² -->

14.6 Emoji Shortcodes (GFM)

GitHub, Slack, and Notion support emoji shortcodes. Wrap the emoji name in colons:

Emoji Shortcodes

:rocket:   :tada:   :white_check_mark:   :warning:   :fire:
:bulb:     :star:   :heart:               :book:      :zap:
:x:        :heavy_check_mark:             :eyes:      :shipit:

14.7 Automatic URL Linking (GFM)

In GFM, bare URLs and email addresses are automatically converted to clickable links:

Auto Links

https://www.example.com
contact@example.com

<!-- Angle-bracket autolinks work in all parsers: -->
<https://www.example.com>
<contact@example.com>

📐 15. YAML Front Matter

YAML Front Matter is a block of metadata placed at the very top of a Markdown file, wrapped in triple dashes ---. It is widely used by static site generators (Jekyll, Hugo, Gatsby, Astro) and tools like Obsidian and Notion to attach structured data to documents.

YAML Front Matter

---
title: "Getting Started with Markdown"
date: 2024-01-15
author: Jane Doe
tags: [markdown, writing, docs]
draft: false
slug: getting-started-markdown
description: "A complete guide to writing in Markdown."
---

# Your Markdown Content Starts Here

The front matter above is parsed as metadata and not shown in the rendered output.

15.1 Common Front Matter Fields

Field	Type	Purpose
title	String	Page or post title
date	Date	Publication date
author	String	Author name
tags	Array	Categorization tags
draft	Boolean	Hide from publish if true
slug	String	URL path segment
description	String	SEO meta description
layout	String	Template to use for rendering
image	String (URL)	Social share / hero image
weight	Number	Sort order (Hugo)

Note

⚠️ Front matter must be the very first thing in the file — no blank lines or content before the opening ---. The closing --- ends the block.

➗ 16. Math / LaTeX

Many Markdown renderers (Jupyter, Obsidian, GitHub, MkDocs with plugins) support LaTeX math expressions. Inline math uses single dollar signs; block math uses double dollar signs.

16.1 Inline Math

Inline Math

The formula is $E = mc^2$ where $c$ is the speed of light.

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

16.2 Block / Display Math

Block Math

$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

16.3 Common LaTeX Symbols

Symbol	LaTeX	Symbol	LaTeX
α	\alpha	β	\beta
π	\pi	Σ	\Sigma
√	\sqrt{x}	∞	\infty
≤	\leq	≥	\geq
±	\pm	×	\times
÷	\div	≠	\neq

Note

💡 Math rendering requires a library like KaTeX or MathJax to be loaded by the renderer. GitHub now supports it natively in .md files.

🧜 17. Mermaid Diagrams (GFM)

GitHub, GitLab, Notion, and Obsidian support Mermaid diagrams — defined inside a fenced code block with the language identifier mermaid. No image files needed — diagrams are generated from text.

17.1 Flowchart

Mermaid Flowchart

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great!]
    B -- No --> D[Debug it]
    D --> B
```

17.2 Sequence Diagram

Mermaid Sequence Diagram

```mermaid
sequenceDiagram
    participant User
    participant Server
    User->>Server: GET /api/data
    Server-->>User: 200 OK + JSON
```

17.3 Gantt Chart

Mermaid Gantt Chart

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
    Design     :a1, 2024-01-01, 7d
    section Development
    Build      :a2, after a1, 14d
    Testing    :a3, after a2, 7d
```

17.4 Other Mermaid Diagram Types

pie — pie / donut charts
classDiagram — UML class diagrams
erDiagram — Entity-relationship diagrams
stateDiagram-v2 — state machine diagrams
gitGraph — Git branch visualizations
journey — user journey maps
mindmap — mind maps (newer Mermaid versions)

📋 18. Admonitions (MkDocs / Obsidian)

Admonitions are styled callout blocks used in documentation tools like MkDocs Material and Obsidian. They use a special blockquote-like syntax with a type keyword.

18.1 MkDocs Material Style

MkDocs Admonitions

!!! note "Optional custom title"
    This is a note admonition.
    Indent content by 4 spaces.

!!! warning
    This is a warning — no custom title.

!!! tip "Pro Tip"
    Use admonitions to highlight important content.

!!! danger "Critical"
    This action cannot be undone!

!!! info
    For informational callouts.

!!! success
    Operation completed successfully.

18.2 Obsidian Callout Style

Obsidian Callouts

> [!NOTE]
> This is a note callout in Obsidian.

> [!WARNING]
> Be careful with this setting.

> [!TIP] Custom Title
> You can override the callout title.

> [!INFO]- Collapsible Callout
> This callout is collapsed by default (note the minus sign).

18.3 Admonition Types Reference

Type	MkDocs Keyword	Obsidian Keyword	Usage
📘 Info / Note	note, info	[!NOTE], [!INFO]	General information
💡 Tip	tip, hint	[!TIP]	Helpful suggestions
⚠️ Warning	warning, caution	[!WARNING], [!CAUTION]	Important cautions
🔴 Danger	danger, error	[!DANGER]	Critical / destructive
✅ Success	success, check	[!SUCCESS]	Positive outcomes
❓ Question	question, faq	[!QUESTION], [!FAQ]	Q&A, prompts
🐛 Bug	bug	[!BUG]	Known issues
💬 Quote	quote, cite	[!QUOTE]	Quotations

📐 19. Markdown Flavors Comparison

Markdown has several "flavors" — each with different supported features. Here's how the major ones compare across every topic covered in this tutorial:

Feature	CommonMark	GFM (GitHub)	MultiMarkdown	Pandoc
Headings (ATX)	✅	✅	✅	✅
Headings (Setext)	✅	✅	✅	✅
Heading anchor IDs	❌	✅	✅	✅
Bold / Italic	✅	✅	✅	✅
Strikethrough	❌	✅	✅	✅
Tables	❌	✅	✅	✅
Task lists	❌	✅	❌	✅
Fenced code blocks	✅	✅	✅	✅
Tilde fences (~~~)	✅	✅	✅	✅
Autolinks	✅	✅	✅	✅
Footnotes	❌	❌	✅	✅
Definition lists	❌	❌	✅	✅
Abbreviations	❌	❌	✅	✅
Highlight (==)	❌	❌	❌	✅
Subscript / Superscript	❌	❌	✅	✅
Math (LaTeX)	❌	✅	❌	✅
Mermaid diagrams	❌	✅	❌	❌
YAML front matter	❌	✅	✅	✅
HTML comments	✅	✅	✅	✅
Raw HTML	✅	✅	✅	✅
Emoji shortcodes	❌	✅	❌	❌

🛠️ 20. Useful Tools & Editors

20.1 Desktop Editors

VS Code — built-in Markdown preview with Ctrl+Shift+V
Typora — WYSIWYG Markdown editor, renders live as you type
Obsidian — powerful knowledge base with rich Markdown and plugins
iA Writer — distraction-free writing with Markdown support
Zettlr — academic Markdown editor with Pandoc and citation support
Mark Text — open-source real-time preview Markdown editor

20.2 Online Tools

Dillinger — browser-based Markdown editor with live preview
StackEdit — full-featured in-browser Markdown editor
CommonMark Dingus — official CommonMark spec tester
Markdown Live Preview — simple side-by-side preview
Mermaid Live Editor — test Mermaid diagrams in real time

20.3 Converters & Libraries

pandoc — convert Markdown to PDF, DOCX, HTML, LaTeX, ePub, and 40+ formats
marked.js — fast, lightweight JavaScript Markdown parser
remark — extensible Markdown processor for Node.js (unified ecosystem)
python-markdown — Python library with extensive extension support
markdownlint — linter to enforce consistent Markdown style
mdx — Markdown + JSX for React-based documentation sites

⚡ 21. Best Practices

Use ATX-style headings (#) over Setext (===) for consistency and portability across all parsers.
Always add a blank line before and after headings, lists, code blocks, tables, and blockquotes to avoid parser ambiguity.
Prefer fenced code blocks (```) over 4-space indented blocks — they're clearer, support language identifiers, and are universally supported.
Use reference links for URLs that appear more than once to keep prose clean and URLs easy to update in one place.
Keep lines under 80–120 characters for better diff readability in Git and version control systems.
Write meaningful alt text for every image — it's critical for accessibility (screen readers) and SEO.
Use a linter like markdownlint in your CI pipeline to catch inconsistencies early and enforce team style.
Always test in the target renderer — GitHub, Notion, VS Code, and Pandoc all handle edge cases differently.
Prefer dashes (-) over asterisks (*) for unordered list bullets to avoid confusion with emphasis markers nearby.
Use YAML front matter consistently in documentation projects so tools can reliably extract metadata for search, navigation, and SEO.
End every Markdown file with a single blank line — many parsers, linters, and POSIX tools require a trailing newline.
Use HTML comments () for invisible notes and TODOs — they never appear in rendered output.

📎 22. Complete Cheat Sheet

Every Markdown element from this tutorial in one quick-reference table:

Element	Syntax	Notes
H1 Heading	# Heading	ATX style
H2 Heading	## Heading	ATX style
H3–H6	### to ######	ATX style
Setext H1	Title\n===	Underline style
Setext H2	Title\n---	Underline style
Internal link	[text](#heading-id)	Anchor link
Bold	text	or __text__
Italic	text	or _text_
Bold Italic	*text*	Triple asterisks
Strikethrough	~~text~~	GFM only
Inline Code	`code`	Single backtick
Code Block	```lang	Fenced backtick
Tilde Code Block	~~~lang	Fenced tilde alternative
Indented Code	4 spaces	Legacy style
Unordered List	- item	or * or +
Ordered List	1. item	Numbers auto-count
Nested List	Indent 2–4 spaces	Mix ordered & unordered
Task List	- [x] done	GFM only
Loose List	Blank lines between items	Wraps items in <p>
Link	[text](url)	Inline style
Link + Title	[text](url "title")	Hover tooltip
Reference Link	[text][id]	Define below doc
Image	![alt](url)	Exclamation prefix
Clickable Image	[![alt](img)](url)	Link wraps image
Blockquote	> text	Nestable
Horizontal Rule	---	or *** or ___
Table	\| col \| col \|	GFM only
Table Align	:---:	Left / Center / Right
Line Break	2 trailing spaces or \	Forces <br>
Escape	\*	Backslash before char
HTML Comment	<!-- text -->	Invisible in output
HTML Entity	©	©, &, <, etc.
YAML Front Matter	---\nkey: val\n---	File metadata
Footnote	[^1]	Extended syntax
Definition List	Term\n: Def	Extended syntax
Abbreviation	*[HTML]: ...	Extended syntax
Highlight	==text==	Extended (not all parsers)
Subscript	H~2~O	Extended syntax
Superscript	mc^2^	Extended syntax
Inline Math	$E=mc^2$	KaTeX / MathJax
Block Math	$$\n...\n$$	Display equation
Mermaid Diagram	```mermaid	GFM / Obsidian
Admonition (MkDocs)	!!! note	MkDocs Material
Callout (Obsidian)	> [!NOTE]	Obsidian style
Emoji	:rocket:	GFM / Notion / Slack
Auto URL	Bare URL or <url>	GFM auto-links

Note

✅ The CommonMark Spec is the most reliable reference for unambiguous Markdown behavior. Test live at commonmark.org/dingus.

>>The best tool is the one you'll actually use. Markdown's superpower is that it gets completely out of your way — and takes your writing everywhere.

🧭 1. What Is Markdown?

📝Note

🔄 2. How Markdown Converts to HTML

Markdown Input

HTML Output (what the parser generates)

📝Note

📌 3. Headings

ATX-Style Headings (Recommended)

📝Note

3.1 Alternative Style (Setext)

Setext Headings

3.2 Heading Anchors & Internal Links

Internal Anchor Links

✍️ 4. Emphasis & Text Styling

Emphasis Syntax

📋 5. Lists

5.1 Unordered Lists

Unordered List

5.2 Ordered Lists

Ordered List

5.3 Nested Mixed Lists

Mixed Nested Lists

5.4 List Continuation Paragraphs (Loose Lists)

List with Continuation Paragraphs

📝Note

5.5 Task Lists (GFM)

Task / Checklist

🔗 6. Links & Images

6.1 Inline Links

Inline Link

6.2 Reference Links

Reference Links

6.3 Images

Image Syntax

6.4 Clickable Images (Image + Link)

Clickable Image

6.5 Image Sizing (via HTML)

Image with Custom Size

📝Note

💻 7. Code

7.1 Inline Code

Inline Code

7.2 Fenced Code Blocks (Backtick Style)

Fenced Code Block

7.3 Fenced Code Blocks (Tilde Style)

Tilde Fenced Block

📝Note

7.4 Indented Code Blocks (Legacy)

Indented Code Block

7.5 Common Language Identifiers

📊 8. Tables (GFM)

Basic Table

8.1 Column Alignment

Column Alignment

📝Note

📣 9. Blockquotes

Simple & Nested Blockquotes

9.1 Blockquotes with Markdown Inside

Rich Blockquote Content

➖ 10. Horizontal Rules

Horizontal Rules

📝Note

🏃 11. Paragraphs & Line Breaks

Paragraphs & Line Breaks

📝Note

🔠 12. Escaping Characters

Escape Sequences

🌐 13. HTML in Markdown

13.1 Inline HTML Elements

Inline HTML Examples

13.2 HTML Entities

HTML Entities in Markdown

13.3 HTML Comments

Markdown Comments

📝Note

🧩 14. Extended Syntax

14.1 Footnotes

Footnotes

14.2 Definition Lists

Definition List

Note

Note

Note

Note

Note

Note

Note

Note

Note

Note

Note

Note

Note