This guide demonstrates all possible markdown typography features and formatting options available in modern markdown processors.

Headings

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)

Heading 6 (H6)

Text Formatting

Basic Formatting

Bold text makes important information stand out. Italic text adds emphasis to specific words. Bold and italic combines both styles for maximum impact. ~~Strikethrough text~~ shows deleted or deprecated content.

Inline Code

Use inline code for short code snippets, file names, or technical terms.

Emphasis Levels

Light emphasis for subtle notes. Strong emphasis for important points. Very strong emphasis for critical information.

Lists

Unordered Lists

Simple bullet point
Another item
- Nested bullet point
- Another nested item
  - Deeply nested item
Back to main level

Ordered Lists

First item
Second item
Third item
1. Nested ordered item
2. Another nested item
Back to main level

Mixed Lists

Ordered item
- Unordered sub-item
- Another sub-item
Another ordered item
- More sub-items
  - Deeply nested
  - Another deep item

Task Lists

Completed task
Pending task
Another completed task
Another pending task

Links and References

Images

Basic Images

Reference Images

Local Images

Code Blocks

Fenced Code Blocks

javascript

function greet(name) {  console.log('Hello, ' + name + '!');  return 'Welcome, ' + name;}
const result = greet('World');console.log(result);

function greet(name) {  console.log('Hello, ' + name + '!');  return 'Welcome, ' + name;}
const result = greet('World');console.log(result);

typescript

function fibonacci(n: number): number {    if (n <= 1) {        return n;    }    return fibonacci(n - 1) + fibonacci(n - 2);}
// Calculate first 10 Fibonacci numbersfor (let i = 0; i < 10; i++) {    console.log(`F(${i}) = ${fibonacci(i)}`);}

function fibonacci(n: number): number {    if (n <= 1) {        return n;    }    return fibonacci(n - 1) + fibonacci(n - 2);}
// Calculate first 10 Fibonacci numbersfor (let i = 0; i < 10; i++) {    console.log(`F(${i}) = ${fibonacci(i)}`);}

css

.container {  max-width: 1200px;  margin: 0 auto;  padding: 20px;}
.button {  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);  border: none;  border-radius: 8px;  padding: 12px 24px;  color: white;  font-weight: 600;  cursor: pointer;  transition: transform 0.2s ease;}
.button:hover {  transform: translateY(-2px);}

.container {  max-width: 1200px;  margin: 0 auto;  padding: 20px;}
.button {  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);  border: none;  border-radius: 8px;  padding: 12px 24px;  color: white;  font-weight: 600;  cursor: pointer;  transition: transform 0.2s ease;}
.button:hover {  transform: translateY(-2px);}

Indented Code Blocks

Syntax Highlighting

json

{  "name": "example-project",  "version": "1.0.0",  "description": "A sample project",  "main": "index.js",  "scripts": {    "start": "node index.js",    "test": "jest"  },  "dependencies": {    "express": "^4.17.1"  }}

{  "name": "example-project",  "version": "1.0.0",  "description": "A sample project",  "main": "index.js",  "scripts": {    "start": "node index.js",    "test": "jest"  },  "dependencies": {    "express": "^4.17.1"  }}

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Example Page</title></head><body>    <h1>Hello, World!</h1>    <p>This is a sample HTML document.</p></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Example Page</title></head><body>    <h1>Hello, World!</h1>    <p>This is a sample HTML document.</p></body></html>

Blockquotes

Simple Blockquotes

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

Nested Blockquotes

First level blockquote

Second level blockquote

Third level blockquote Back to second level Back to first level

Blockquotes with Other Elements

Note: This blockquote contains formatted text.

It can include lists

And other markdown elements
javascript
// Even code blocksconsole.log('Hello from blockquote');
// Even code blocksconsole.log('Hello from blockquote');

Tables

Basic Table

Name	Age	Occupation
John	25	Developer
Jane	30	Designer
Bob	35	Manager

Aligned Table

Left Aligned	Center Aligned	Right Aligned
Content	Content	Content
More content	More content	More content

Complex Table

Feature	Markdown	HTML	Notes
Bold	`text`	`<strong>text</strong>`	Strong emphasis
Italic	`text`	`<em>text</em>`	Emphasis
`Code`	`code`	`<code>code</code>`	Inline code
Link	`[text](url)`	`<a href="url">text</a>`	Hyperlinks

Horizontal Rules

Escaping Characters

Special Characters

*This is not italic* `This is not code` [This is not a link] # This is not a heading

Backslashes

\italic becomes *italic*

Mathematical Expressions

Inline Math

The quadratic formula is: $ax^2 + bx + c = 0$

Block Math

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

This mathematical expression is known as the Gaussian integral and forms the foundation of the normal distribution.

A more complex example:

\begin{align} \nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\ \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\epsilon_0\frac{\partial \vec{E}}{\partial t} \end{align}

These are Maxwell's equations, which form the foundation of electromagnetism.

Footnotes

Here's a sentence with a footnote¹.

Definition Lists

Term 1: Definition 1
Term 2: Definition 2; Another definition for term 2

Advanced Features

Collapsible Sections

Click to expand

This content is hidden by default and can be expanded by clicking the summary.

It can contain any markdown content
Including lists
And formatted text

Admonitions

Note: This is a note block with important information.

Warning: This is a warning block for critical information.

Tip: This is a tip block with helpful suggestions.

Best Practices

Typography Principles

Hierarchy: Use headings to create clear content structure
Consistency: Maintain consistent formatting throughout
Readability: Choose fonts and spacing for optimal reading
Accessibility: Ensure content is accessible to all users

Markdown Guidelines

Use semantic markup over visual formatting
Keep line length reasonable (80-120 characters)
Use descriptive link text
Include alt text for images
Test your markdown in different renderers

Conclusion

This comprehensive guide covers all major markdown typography features. Remember that not all markdown processors support every feature, so always test your content in your target environment.

For more information, visit the Markdown Guide.

References

developer.mozilla.org - MDN Web Docs (web platform reference).
semver.org - Semantic Versioning specification.
ietf.org - IETF RFC index (protocol standards).
arxiv.org - arXiv software engineering recent submissions (research context).
cheatsheetseries.owasp.org - OWASP Cheat Sheet Series (applied security guidance).

This is the footnote content. ↩

Headings#

Heading 1 (H1)

Heading 2 (H2)#

Heading 3 (H3)#

Heading 4 (H4)#

Heading 5 (H5)

Heading 6 (H6)

Text Formatting#

Basic Formatting#

Inline Code#

Emphasis Levels#

Lists#

Unordered Lists#

Ordered Lists#

Mixed Lists#

Task Lists#

Links and References#

Basic Links#

Links with Titles#

Reference Links#

Auto-links#

Email Links#

Images#

Basic Images#

Reference Images#

Local Images#

Code Blocks#

Fenced Code Blocks#

Indented Code Blocks#

Syntax Highlighting#

Blockquotes#

Simple Blockquotes#

Nested Blockquotes#

Blockquotes with Other Elements#

Tables#

Basic Table#

Aligned Table#

Complex Table#

Horizontal Rules#

Escaping Characters#

Special Characters#

Backslashes#

Mathematical Expressions#

Inline Math#

Block Math#

Footnotes#

Definition Lists#

Advanced Features#

Collapsible Sections#

Admonitions#

Best Practices#

Typography Principles#

Markdown Guidelines#

Conclusion#

References#

Footnotes#

Related Posts

Headings

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Text Formatting

Basic Formatting

Inline Code

Emphasis Levels

Lists

Unordered Lists

Ordered Lists

Mixed Lists

Task Lists

Links and References

Basic Links

Links with Titles

Reference Links

Auto-links

Email Links

Images

Basic Images

Reference Images

Local Images

Code Blocks

Fenced Code Blocks

Indented Code Blocks

Syntax Highlighting

Blockquotes

Simple Blockquotes

Nested Blockquotes

Blockquotes with Other Elements

Tables

Basic Table

Aligned Table

Complex Table

Horizontal Rules

Escaping Characters

Special Characters

Backslashes

Mathematical Expressions

Inline Math

Block Math

Footnotes

Definition Lists

Advanced Features

Collapsible Sections

Admonitions

Best Practices

Typography Principles

Markdown Guidelines

Conclusion

References

Footnotes