Markdown Feature Showcase

This article demonstrates all the markdown features available in this blog system. Use this as a reference when writing your own posts.

Text Formatting

You can use bold text for emphasis, italic text for subtle emphasis, and bold italic for strong emphasis. You can also use inline code for technical terms or commands.

Here’s a paragraph with a link to external site and some strikethrough text if you need to show corrections.

Headings

The heading structure creates a clear hierarchy for your content:

This is H3

Use H3 for subsections under main topics.

This is H4

H4 is perfect for detailed breakdowns within subsections.

Lists

Unordered Lists

• First item in the list
• Second item with more details
  • Nested item one
  • Nested item two
• Third item back at root level

Ordered Lists

1. First step in the process
2. Second step with explanation
   1. Sub-step A
   2. Sub-step B
3. Third and final step

Task Lists

• Completed task
• Another completed item
• Pending task
• Future work item

Blockquotes

This is a blockquote. Use it for highlighting important information, quotes from other sources, or callout sections.

Blockquotes can span multiple paragraphs and include other markdown formatting like bold and italic.

You can also nest blockquotes if needed, though this should be used sparingly for readability.

Code Examples

Inline Code

Use const variable = value for inline code references within sentences.

Code Blocks with Syntax Highlighting

JavaScript example:

// Function to calculate Fibonacci sequence
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

Python example:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quicksort(numbers)
print(sorted_numbers)

TypeScript example:

interface User {
  id: string;
  name: string;
  email?: string;
}

class UserService {
  private users: Map<string, User> = new Map();
  
  addUser(user: User): void {
    this.users.set(user.id, user);
  }
  
  getUser(id: string): User | undefined {
    return this.users.get(id);
  }
}

Shell commands:

npm install @tailwindcss/typography
npm run build
npm run dev

SQL queries:

SELECT users.name, COUNT(posts.id) as post_count
FROM users
LEFT JOIN posts ON users.id = posts.user_id
WHERE users.created_at > '2025-01-01'
GROUP BY users.id, users.name
ORDER BY post_count DESC
LIMIT 10;

Tables

Tables are great for structured data presentation:

Feature	Description	Status
Syntax Highlighting	Code blocks with language-specific highlighting	✅ Active
Copy Code Button	One-click code copying	✅ Active
Anchor Links	Clickable heading anchors	✅ Active
Reading Time	Estimated reading duration	✅ Active
Dark Mode	Auto system theme detection	✅ Active

You can align columns differently:

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

Horizontal Rules

Use horizontal rules to separate major sections:

---

Content continues after the rule.

Images

While this example doesn’t include images, you can add them with:

![Alt text for accessibility](/path/to/image.jpg)

Mathematical Expressions

For mathematical content, you can use LaTeX-style notation (if configured):

Inline math: (E = mc^2)

Block math:

[ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} ]

Links and References

• Internal link to another post
• External link
• Link with title

Best Practices

When writing markdown content for this blog:

1. Use clear headings - Structure your content hierarchically
2. Add code language tags - Enable proper syntax highlighting
3. Keep paragraphs concise - Improve readability on all devices
4. Use lists effectively - Break down complex information
5. Include examples - Code examples make technical content clearer
6. Test on mobile - Ensure your content works on small screens

Advanced Features

Nested Structures

You can combine different markdown elements:

1. First main point

   • Supporting detail
   • Another detail with code

   // Code example within a list
   const example = "nested code";

2. Second main point

   With a blockquote inside

   And a table:

   Column 1	Column 2
   Data	Data

Special Characters

You can use special characters and symbols:

• Copyright: ©
• Trademark: ™
• Arrows: → ← ↑ ↓
• Math: ≈ ≠ ≤ ≥ ∞
• Currency: $ € £ ¥

Conclusion

This markdown system provides everything you need for creating rich, technical content. The combination of beautiful typography, syntax highlighting, and interactive features makes for an excellent reading experience.

Try hovering over code blocks to see the copy button, or click on headings to get anchor links. The system is designed for both writers and readers to have the best possible experience.

For more information on writing great technical content, check out the blog template in the content directory.