Markdown Style Guide: Every Feature Visualized

Headings

This post demonstrates every supported markdown element. Each one has been carefully styled to serve a distinct visual purpose.

Third-level heading

Fourth-level heading

Text Formatting

This is regular paragraph text. You can make text bold for emphasis or italic for nuance. You can also combine both bold and italic for maximum emphasis.

Here is some inline code mixed into a sentence — useful for referencing function names, variables, or file paths.

Blockquotes

Lists

Unordered List

• First item with some descriptive text
• Second item explaining a concept
• Third item with bold text and code inline
• Fourth item wrapping up the list

Ordered List

1. Plan your architecture before writing any code
2. Implement incrementally — one feature at a time
3. Test thoroughly with real-world edge cases
4. Document as you go — future you will thank present you
5. Ship early and iterate based on feedback

Code Blocks

Here is a syntax-highlighted C++ code block with the custom header:

#include <iostream>
#include <vector>
#include <algorithm>

int main() {
    std::vector<int> numbers = {5, 3, 8, 1, 9, 2};

    // Sort in descending order
    std::sort(numbers.begin(), numbers.end(), std::greater<int>());

    for (const auto& num : numbers) {
        std::cout << num << " ";
    }
    // Output: 9 8 5 3 2 1

    return 0;
}

And a Python example:

def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence up to n terms."""
    if n <= 0:
        return []
    if n == 1:
        return [0]

    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
    return sequence

print(fibonacci(10))
# [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Links

Visit Next.js documentation for details. Check out the Tailwind CSS docs for styling reference. External links get a small arrow icon automatically.

Horizontal Rules

Content before the divider.

Content after the divider.

Tables

| Feature | Supported | Notes | |---------|-----------|-------| | Headings | ✅ | h1 through h4 | | Bold & Italic | ✅ | Inline formatting | | Code Blocks | ✅ | With syntax highlighting | | Links | ✅ | External links styled | | Blockquotes | ✅ | Amber accent border | | Lists | ✅ | Ordered with numbered badges | | Tables | ✅ | Striped rows with hover | | Horizontal Rules | ✅ | Centered ornament | | Images | ✅ | With captions |

Images

Images render with a border, rounded corners, and an optional caption below.

Summary

Every markdown feature above has a unique visual identity. Headings have accent bars, blockquotes have amber borders, code blocks have a dark terminal-style header, ordered lists have numbered badges, and tables have striped rows. Use this post as a reference when writing new content.