Lorem ipsum dolor sit amet, consectetur adipiscing elit. This post demonstrates every markdown feature supported on this site.

---

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Text Formatting

This is bold text and this is also bold.

This is italic text and this is also italic.

This is bold and italic combined.

This is strikethrough text.

This is inline code within a sentence.

---

Links

Here is an inline link to an external site.

Here is an inline link with title - hover to see the title.

Here is a link to another page on this site.

Autolinked URL: https://example.com

Email link: hello@supermodern.tech

---

Lists

Unordered Lists

• Item one
• Item two
  • Nested item 2a
  • Nested item 2b
    • Deeply nested item
• Item three

Alternative syntax:

• Asterisk item one
• Asterisk item two

• Plus item one
• Plus item two

Ordered Lists

1. First item
2. Second item
   1. Nested numbered item
   2. Another nested item
3. Third item

Mixed Lists

1. First ordered item
   • Unordered sub-item
   • Another sub-item
2. Second ordered item
   1. Ordered sub-item
   2. Another ordered sub-item

Task Lists

• Completed task
• Another completed task
• Incomplete task
• Another incomplete task

---

Blockquotes

This is a simple blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a blockquote that spans multiple lines in the markdown source.

Nested blockquotes:

This is nested inside the outer blockquote.

And this is nested even deeper.

Blockquote with formatting

You can use any markdown formatting inside blockquotes, including:

• Lists
• code
• links

---

Code

Inline Code

Use the console.log() function to debug. The useState hook is commonly used in React.

Code Blocks (Fenced)

Plain code block without language specification.
No syntax highlighting applied.

// JavaScript with syntax highlighting
function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

const result = greet('Supermodern');

// TypeScript example
interface User {
  id: number;
  name: string;
  email: string;
}

const getUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

# Python example
def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence up to n terms."""
    sequence = [0, 1]
    for _ in range(2, n):
        sequence.append(sequence[-1] + sequence[-2])
    return sequence[:n]

print(fibonacci(10))

/* CSS example */
.supermodern-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
}

<!-- HTML example -->
<article class="blog-post">
  <header>
    <h1>Post Title</h1>
    <time datetime="2025-01-05">January 5, 2025</time>
  </header>
  <div class="content">
    <p>Post content goes here.</p>
  </div>
</article>

{
  "name": "supermodern",
  "version": "1.0.0",
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.0.0"
  }
}

# Bash/Shell example
npm install
npm run build
npm run start

Indented Code Block

This is an indented code block.
Created with 4 spaces at the start of each line.
No syntax highlighting is applied.

---

Images

Basic Image

Image with Alt Text

Image with Title (hover to see)

Image as Link

---

Figure with Caption (HTML)

---

Tables

Simple Table

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Aligned Table

Left Aligned	Center Aligned	Right Aligned
Left	Center	Right
Text	Text	Text
More	More	More

Table with Formatting

Feature	Status	Notes
Bold	✅ Supported	Use **text**
Italic	✅ Supported	Use *text*
Code	✅ Supported	Use backticks
Links	✅ Supported	Standard syntax

---

Horizontal Rules

Three different syntaxes produce the same result:

---

---

---

---

HTML Elements

Abbreviations

The HTML specification is maintained by the W3C.

Subscript and Superscript

Water is H₂O.

E = mc²

Keyboard Input

Press Ctrl + C to copy.

Press ⌘ + Shift + P to open the command palette.

Marked/Highlighted Text

This is highlighted text using the mark element.

Small Text

This is small text, often used for fine print or disclaimers.

Definition Lists (HTML)

Supermodern

An approach that melds advanced tools with focused ingenuity and experienced intuition.

Lorem Ipsum

Placeholder text commonly used in design and publishing.

Details/Summary (Collapsible)

Click to expand this section

This content is hidden by default and revealed when the user clicks the summary.

You can include any content here:

• Lists
• Formatted text
• Even code blocks

This section is open by default

Using the open attribute makes the details visible initially.

---

Footnotes

Here is a sentence with a footnote¹.

Here is another sentence with a different footnote².

You can also use inline footnotes^[This is an inline footnote that doesn't need a separate reference].

---

Escaping Characters

Use backslashes to display literal characters:

*This is not italic*

`This is not code`

# This is not a heading

[This is not a link](https://example.com)

---

Line Breaks

This line has two spaces at the end to create a line break without a new paragraph.

This line uses a backslash
to create a line break.

---

Emoji (if supported)

:rocket: :star: :heart: :thumbsup:

Or use actual Unicode emoji: 🚀 ⭐ ❤️ 👍

---

Summary

This post demonstrates all major markdown features:

1. ✅ Headings (H1-H6)
2. ✅ Text formatting (bold, italic, strikethrough)
3. ✅ Links (inline, reference, autolink)
4. ✅ Lists (ordered, unordered, nested, task lists)
5. ✅ Blockquotes (simple and nested)
6. ✅ Code (inline and fenced with syntax highlighting)
7. ✅ Images (basic, with alt text, with titles)
8. ✅ Figures with captions
9. ✅ Tables (with alignment)
10. ✅ Horizontal rules
11. ✅ HTML elements (abbr, sub, sup, kbd, mark, details)
12. ✅ Footnotes
13. ✅ Escaping special characters

---

Last updated: January 5, 2025

Footnotes

1. This is the first footnote. It can contain multiple paragraphs and even code. ↩

2. This is the second footnote with a link. ↩