Markdown Features Demo

This article demonstrates various Markdown features and the effects of our added remark/rehype plugins.

Table of Contents

• Basic Formatting
  • Text Styling
  • Quotes
  • Lists
    • Unordered Lists
    • Ordered Lists
• Advanced Features
  • Tables
  • Code Blocks
  • Task Lists
  • Links and Images
  • Emojis
• Strikethrough and Other GFM Features
  • Automatic Links
• Math Formulas (if needed)
• Summary

Basic Formatting

Text Styling

This is a regular paragraph with bold text and italic text.

You can also use inline code to highlight technical terms.

Quotes

This is a blockquote. It’s used to quote content from other sources or highlight important information.

Quotes can contain multiple paragraphs.

Lists

Unordered Lists

• First item
• Second item
  • Nested item 1
  • Nested item 2
• Third item

Ordered Lists

1. Do this first
2. Then do that
3. Finally complete this
   1. Sub-step A
   2. Sub-step B

Advanced Features

Tables

Feature	Description	Status
GitHub-flavored Markdown	Support for tables, strikethrough, etc.	✅ Enabled
Auto TOC generation	Automatically generated from headings	✅ Enabled
Heading anchor links	Click headings to copy link	✅ Enabled
Emoji accessibility	Add aria-label for emojis	✅ Enabled

Code Blocks

// JavaScript code example
function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + item.price * item.quantity;
  }, 0);
}

const total = calculateTotal([
  { price: 10, quantity: 2 },
  { price: 15, quantity: 1 }
]);

console.log(`Total: ${total}`);

# Python code example
def fibonacci(n):
    """Calculate the nth Fibonacci number"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Task Lists

• Install remark and rehype plugins
• Configure astro.config.mjs
• Update Prose component styles
• Test all features
• Optimize performance

Links and Images

This is an example of an external link.

Emojis

Let’s test some emojis: 😀 🎉 🚀 ✨ 💡

These emojis now have accessibility labels that screen readers can properly read.

Strikethrough and Other GFM Features

This text has been deleted

Automatic Links

Visit https://github.com for more information.

You can also send email to example@email.com.

Math Formulas (if needed)

While we haven’t configured math formula plugins, it’s easy to add remark-math and rehype-katex to support LaTeX math formulas.

Summary

By adding these remark and rehype plugins, our Markdown rendering capabilities have been significantly enhanced:

1. GitHub-flavored Markdown - Support for tables, strikethrough, task lists, etc.
2. Auto TOC generation - Automatically generated navigation based on heading structure
3. Heading anchors - Each heading can be directly linked
4. Emoji accessibility - Improved accessibility
5. Beautiful styling - Consistent visual effects through Prose component

These features make our technical documentation more professional and user-friendly!