Markdown Showcase: All Features

Welcome to my comprehensive showcase of all markdown features available in my blog platform. This post will demonstrate everything you can do with my enhanced markdown support.

Text Formatting

Basic text formatting includes:

Bold text using **double asterisks**
Italic text using *single asterisks*
~~Strikethrough~~ using ~~tildes~~
Inline code using backticks

Alert Blocks

Info: This is an informational alert. Use it to highlight important information or tips. You can include multiple lines of text in your alerts.

Warning: This is a warning alert. Use it to warn users about potential issues or things to watch out for. Make sure to follow the exact format with the double asterisks and colon.

Error: This is an error alert. Use it to highlight critical issues or errors that need attention. These alerts help make important information stand out.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Blockquotes

"Regular blockquotes are great for highlighting important information or quotes."

You can even have multiple paragraphs in blockquotes.

— Someone Famous

Lists

Unordered Lists

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

Ordered Lists

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

Code Blocks Without Line Numbers

// Regular code block without line numbers
interface User {
  id: string;
  name: string;
  email: string;
}

Code Blocks With Line Numbers

1+ interface Item {
2+   id: number;
3+   price: number;
4+   quantity: number;
5+ }
6+ 
7  function calculateTotal(items: Item[]): number {
8    return items.reduce((total, item) => {
9      return total + item.price * item.quantity;
10    }, 0);
11  }
12
13// Example usage
14const items = [
15  { id: 1, price: 10, quantity: 2 },
16  { id: 2, price: 15, quantity: 1 },
17];
18
19const total = calculateTotal(items);
20console.log(`Total: ${total}`);

Tables

Technology	Purpose	Description
Tables	Organized data display with borders and proper spacing	✅
Code Blocks	Syntax highlighting with line numbers and copy button	✅
Images	Responsive images with optimized loading	✅
Alerts	Contextual alert messages with different styles	✅

Images

Images are automatically optimized and responsive. You can add optional titles by adding a pipe symbol (|) after the alt text:

Markdown Image With Title Example — A markdown image

Regular images without titles work too:

Task Lists

Conclusion

This post showcases all the markdown features available in my blog platform. This can be used as a reference when writing your other blog posts.

For more information about markdown syntax, visit GitHub's Markdown Guide.

Markdown Showcase: All Features of My Blog Platform