Skip to content
~/sph.sh

2025-09-04

Complete Markdown Typography Guide

A comprehensive guide to all markdown typography features and formatting options.

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

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

Mixed Lists

  1. Ordered item
    • Unordered sub-item
    • Another sub-item
  2. Another ordered item
    • More sub-items
      • Deeply nested
      • Another deep item

Task Lists

  • Completed task
  • Pending task
  • Another completed task
  • Another pending task

Link text

Link with title

Reference link

https://example.com

[email protected]

Images

Basic Images

Alt text

Reference Images

Alt text

Local Images

Local sample image

Code Blocks

Fenced Code Blocks

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

const result = greet('World');
console.log(result);
function fibonacci(n: number): number {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// Calculate first 10 Fibonacci numbers
for (let i = 0; i < 10; i++) {
    console.log(`F(${i}) = ${fibonacci(i)}`);
}
.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

#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory
{
  "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"
  }
}
<!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
// Even code blocks
console.log('Hello from blockquote');

Tables

Basic Table

NameAgeOccupation
John25Developer
Jane30Designer
Bob35Manager

Aligned Table

Left AlignedCenter AlignedRight Aligned
ContentContentContent
More contentMore contentMore content

Complex Table

FeatureMarkdownHTMLNotes
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: ax2+bx+c=0ax^2 + bx + c = 0

Block Math

∫−∞∞e−x2dx=π\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:

∇⋅E⃗=ρϵ0∇⋅B⃗=0∇×E⃗=−∂B⃗∂t∇×B⃗=μ0J⃗+μ0ϵ0∂E⃗∂t\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 footnote1.

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

  1. Hierarchy: Use headings to create clear content structure
  2. Consistency: Maintain consistent formatting throughout
  3. Readability: Choose fonts and spacing for optimal reading
  4. 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.

Footnotes

  1. This is the footnote content. ↩

Related posts

Sentry Integration with React Native Expo: A Practical Quick Guide

Step-by-step guide to integrating Sentry error monitoring into a React Native Expo app. Covers SDK initialization, Expo Router instrumentation, session replay, source map uploads for EAS Build and EAS Update, and common pitfalls to avoid.

react-nativeexpomonitoring+2
TypeScript AI SDK Comparison: Vercel AI SDK vs OpenAI Agents SDK for Agent Development

A practical comparison of TypeScript AI SDKs for building AI agents - Vercel AI SDK, OpenAI Agents SDK, and AWS Bedrock integration. Includes code examples, decision frameworks, and production patterns.

typescriptai-toolsserverless+4
Comparing TypeScript Formatting and Linting Tools: Biome, Oxlint, ESLint, and Prettier

A comprehensive comparison of modern TypeScript linting and formatting tools - ESLint, Prettier, Biome, and Oxlint - with performance benchmarks, configuration examples, and migration strategies.

typescripteslintprettier+7
Learning Effect: A Practical Adoption Guide for TypeScript Developers

A comprehensive guide to understanding Effect, learning it incrementally, and integrating it with AWS Lambda. Includes real code examples, common pitfalls, and practical patterns from production usage.

typescripteffectaws-lambda+5
AWS Secrets Manager & Parameter Store: Security Best Practices

A comprehensive technical guide comparing AWS Secrets Manager and Systems Manager Parameter Store, demonstrating when to use each service with real-world implementation patterns.

awssecrets-managerparameter-store+8