Skip to content
~/sph.sh

Complete Markdown Typography Guide

Every markdown typography and formatting feature, from headings and tables to footnotes, definition lists, and admonitions.

Ayhan Sipahi Ayhan Sipahi

Markdown processors agree on headings, lists, and code fences. Beyond that, support diverges: footnotes, definition lists, collapsible sections, and admonitions each depend on the renderer. The sections below show every feature with its source syntax, so you can check what survives in your own renderer before relying on it.

Headings#

Heading 1 Style (H1 = Post Title)#

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 (opens in new tab)

Link with title (opens in new tab)

Reference link (opens in new tab)

https://example.com (opens in new tab)

user@example.com

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*

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#

Headings, lists, links, tables, and fenced code work in every processor worth using. Footnotes, definition lists, and admonitions need either a plugin or a renderer that ships them, so verify those in the target environment before you depend on them.

The Markdown Guide (opens in new tab) tracks which extended syntax each popular processor supports.

References#

Footnotes#

  1. This is the footnote content. ↩

Related posts

Mermaid Diagram Types: Examples of Every Chart Type

Every Mermaid diagram type with a copy-ready example: flowcharts, sequence and class diagrams, ER models, Gantt charts, journeys, and more

documentation · tutorial

Engineering Team Documentation: Working Agreements, Definition of Done, and On-Call Docs

The team documents a mature engineering team owns: onboarding, working agreements, Definition of Done, on-call, knowledge transfer, and what makes each one good.

engineering-culture · hiring · documentation +4

Amazon Bedrock Knowledge Bases Explained: Data Sources and Vector Stores

What a Bedrock Knowledge Base really is, which data sources and vector stores are first-class, and why the console default rarely fits a small corpus.

aws · aws-bedrock · rag +3

Sentry Integration with React Native Expo: A Practical Quick Guide

Step-by-step guide to adding Sentry to a React Native Expo app: SDK setup, Expo Router instrumentation, session replay, and source maps for EAS.

react-native · expo · monitoring +2

TypeScript AI SDK Comparison: Vercel AI SDK vs OpenAI Agents SDK for Agent Development

A practical comparison of TypeScript AI SDKs for building agents: Vercel AI SDK, OpenAI Agents SDK, and AWS Bedrock, with code examples and decision frameworks.

typescript · ai-tools · serverless +4