Markdown Typography Showcase

This page demonstrates all markdown elements and how they’re styled on this blog.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Text Formatting

Bold text or alternatively bold text

Italic text or alternatively italic text

Bold and italic text or alternatively bold and italic

Strikethrough text

Inline code with backticks

Blockquotes

This is a blockquote

It can span multiple lines

This is a nested blockquote

With another level

And even deeper

Lists

Unordered Lists

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
• Item 3

Ordered Lists

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item

Task Lists

• Completed task
• Incomplete task
• Another task

Code Blocks

// JavaScript code
function greeting(name) {
  return `Hello, ${name}!`;
}

console.log(greeting('Developer'));

# Python code
def greeting(name):
    return f"Hello, {name}!"

print(greeting("Developer"))

/* CSS code */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

Tables

Horizontal Rule

Links

External link

Internal link

Images

Diagrams with Mermaid

Math Expressions

Inline math: $E = mc^2$

Display math:

\frac{d}{dx}(e^x) = e^x

\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

Footnotes

Here’s a sentence with a footnote¹.

Abbreviations

HTML is a markup language.

*[HTML]: HyperText Markup Language

Definition Lists

Term 1 : Definition 1

Term 2 : Definition 2a : Definition 2b

Highlighting

==This text is highlighted==

Superscript and Subscript

Superscript: X^2^ Subscript: H2O

Emoji

:smile: :heart: :+1: :sparkles:

Line Breaks

This is the first line.
And this is the second line.

Escaping Characters

*This is not italic*
*This is not bold*
`This is not code`

Advanced Formatting

Callouts

:bulb: Tip: This is a tip callout.

:warning: Warning: This is a warning callout.

:information_source: Note: This is an information callout.

:x: Error: This is an error callout.