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);

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print("F(" + str(i) + ") = " + str(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);
}

Indented Code Blocks#

This is an indented code block It preserves formatting And uses monospace font

Syntax Highlighting#

Bash

#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory

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"
  }
}

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#

Important Note: This blockquote contains formatted text.

It can include lists

And other markdown elements
JavaScript
// Even code blocks
console.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.

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#

Footnotes#

Comments (0)

Join the conversation

No comments yet

Comments (0)

Join the conversation

No comments yet

Related Posts