Markdown Content Showcase

A comprehensive example demonstrating all markdown content types including headings, lists, code blocks, links, images, and more

FNFake Nameson
markdowndocumentationexamples

This post demonstrates all the different types of content that can be used in markdown blog posts. Each section showcases a different content type to help you understand how to format your posts.

Level 2 Heading

This is a paragraph with some bold text and some italic text. You can also combine them like bold and italic. Here's an example link to demonstrate inline links.

Level 3 Heading

Here's a code block with JavaScript syntax highlighting:

function greet(name) {
  return `Hello, ${name}!`;
}
 
const message = greet('World');
console.log(message);

And here's some inline code: const x = 42; within a sentence.

Level 4 Heading

Here's a Python code block:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
 
result = fibonacci(10)
print(f"Fibonacci(10) = {result}")
Level 5 Heading

Here's a TypeScript example with types:

interface User {
  id: number;
  name: string;
  email: string;
}
 
function createUser(name: string, email: string): User {
  return {
    id: Date.now(),
    name,
    email,
  };
}
Level 6 Heading

Here's a CSS example:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
 
.button {
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: 0.5rem;
}

Unordered Lists

Here's an unordered list with various items:

  • First item
  • Second item with bold text
  • Third item with italic text
  • Fourth item with inline code
  • Fifth item with a link
  • Nested item
    • Nested sub-item
    • Another nested sub-item
      • Deeply nested item
  • Back to top level

Ordered Lists

Here's an ordered list showing a step-by-step process:

  1. First step: Initialize the project
  2. Second step: Install dependencies
  3. Third step: Configure the build system
  4. Fourth step: Write your code
  5. Fifth step: Test your application
  6. Sixth step: Deploy to production

You can also nest ordered lists:

  1. Main item one
  2. Main item two
    1. Sub-item 2.1
    2. Sub-item 2.2
      1. Sub-sub-item 2.2.1
      2. Sub-sub-item 2.2.2
  3. Main item three

Code Blocks in Different Languages

JavaScript/TypeScript

type Status = 'pending' | 'success' | 'error';
 
async function fetchData(url: string): Promise<Status> {
  try {
    const response = await fetch(url);
    if (response.ok) {
      return 'success';
    }
    return 'error';
  } catch {
    return 'error';
  }
}

JSON

{
  "name": "My Blog",
  "version": "1.0.0",
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.0.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

Shell/Bash

#!/bin/bash
echo "Starting build process..."
npm install
npm run build
echo "Build complete!"

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is an example HTML document.</p>
</body>
</html>

Blockquotes

Here's a blockquote example:

This is a blockquote. It can contain multiple paragraphs and other markdown elements like bold text and italic text.

You can have multiple paragraphs in a blockquote.

You can even nest blockquotes!

Links and Images

Here are some example links:

Images can be included like this:

Example image

Mixed Content

Here's a paragraph that mixes different elements. You can have bold text, italic text, inline code, and links all in the same paragraph.

Code in Headings

You can also use code in headings like this: Avoid <code>any</code>, Use <code>unknown</code> Instead

Lists with Code

Here's a list that includes code blocks:

  1. First, set up your environment:

    npm install

  2. Then, run the development server:

    npm run dev

  3. Finally, open your browser to http://localhost:3000

This post demonstrates all the markdown content types available:

  • All heading levels (h2 through h6)
  • Unordered and ordered lists (with nesting)
  • Code blocks with syntax highlighting (multiple languages)
  • Inline code
  • Links (external and internal)
  • Images
  • Blockquotes
  • Bold and italic text
  • Mixed content combinations

Feel free to use this as a reference when writing your own blog posts!

Note: This is a mock-up post created as part of the Feather blog template demonstration. The content is provided as an example to showcase the blog's features including markdown rendering, search functionality, tags, and more.

Feather is a blog template built for Next.js. You can use these example posts as a reference when creating your own content.