Welcome to the Markdown Styling Guide! This post demonstrates the rendering of various Markdown elements to ensure they look great in both Light and Dark modes.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Formatting

• Bold Text using **bold** or __bold__
• Italic Text using *italic* or _italic_
• Bold and Italic using ***text***
• Strikethrough using ~~text~~
• Inline Code using backticks

Lists

Unordered List

• Item 1
• Item 2
  • Sub-item 2.1
  • Sub-item 2.2
    • Sub-sub-item 2.2.1
• Item 3

Ordered List

1. First step
2. Second step a. Sub-step I b. Sub-step II
3. Third step

Code Blocks

JavaScript

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

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
 
/* Dark mode override */
.dark .container {
  background-color: #1a1a1a;
}

Python

def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)
 
print(fibonacci(10))

Bash

#!/bin/bash
 
echo "Starting deployment..."
npm run build
if [ $? -eq 0 ]; then
  echo "Build successful!"
else
  echo "Build failed."
fi

Tables

Blockquotes

This is a blockquote. It works well for highlighting quotes or important information.

It can span multiple lines.

Horizontal Rule

Links and Images

Visit our Homepage

An example image with a caption.

Task List

• Build the site
• Add markdown support
• Write more content