GitHub Flavored Markdown & MDX Demo

This article demonstrates all the GitHub Flavored Markdown (GFM) features supported by remark-gfm, plus some basic MDX capabilities.

Autolink Literals

GFM automatically converts URLs and email addresses into clickable links:

• Visit https://astro.build for more information
• Check out www.github.com for the source code
• Contact us at hello@example.com

Tables

GFM supports tables with alignment options:

Feature	Supported	Priority	Notes
Tables	Yes	High	Essential
Task Lists	Yes	High	Very useful
Strikethrough	Yes	Medium	Nice to have
Footnotes	Yes	Low	Advanced

Task Lists

How to use task lists

Track your progress with interactive task lists:

• Set up Astro project
• Install @astrojs/mdx integration
• Configure remark-gfm plugin
• Write comprehensive documentation
• Add more examples
• Deploy to production

Strikethrough

You can mark text as deleted or incorrect:

• This is wrong information
• Single tilde also works (if singleTilde: true)
• The correct answer is 42 43

Footnotes

GFM supports footnotes for additional context¹. You can reference them inline² and they’ll appear at the bottom of the document.

Code Examples

Inline code: const greeting = 'Hello, World!';

Block code with syntax highlighting:

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

function greetUser(user: User): string {
    return `Hello, ${user.name}!`;
}

const currentUser: User = {
    id: 1,
    name: 'Robert',
    email: 'robert@example.com',
};

console.log(greetUser(currentUser));

// JavaScript example
const fetchData = async (url) => {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

IMAGE

MDX Capabilities

MDX allows you to use JSX directly in your markdown content.

Inline JSX Elements

Here’s some text with inline styled content using JSX.

You can also use HTML elements: highlighted text and Ctrl + C for keyboard shortcuts.

Expressions

MDX supports JavaScript expressions: 2 + 2 = 4 and the current year is 2025.

Blockquotes

Note: This is an important note using a blockquote.

GFM and MDX work seamlessly together in Astro, providing a powerful content authoring experience.

Warning: Make sure to install both @astrojs/mdx and remark-gfm for full functionality.

Horizontal Rules

You can use horizontal rules to separate sections:

---

Lists

Unordered Lists

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

Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Emphasis

• Italic text or italic text
• Bold text or bold text
• Bold and italic or bold and italic
• Strikethrough text

Links and Images

Visit Astro Documentation

Link with title

Definition Lists

While not part of standard GFM, you can still write definition-style content:

Term 1 : Definition for term 1

Term 2 : Definition for term 2 : Another definition for term 2

GitHub Alerts

GitHub-style alerts provide a way to emphasize critical information using special blockquote syntax:

Mathematical Expressions with KaTeX

You can write inline math like $E = mc^2$ or $\sum_{i=1}^{n} x_i$ directly in your markdown.

For display math, use double dollar signs:

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

You can also write complex equations:

$$\begin{array}{l r} F = ma & \text{(1)} \\ E_k = \frac{1}{2}mv^2 & \text{(2)} \end{array}$$

Summary

This document demonstrates:

1. ✅ Autolink literals (URLs and emails)
2. ✅ Tables with alignment
3. ✅ Task lists
4. ✅ Strikethrough text
5. ✅ Footnotes
6. ✅ Code blocks with syntax highlighting
7. ✅ Inline JSX elements (MDX feature)
8. ✅ JavaScript expressions (MDX feature)
9. ✅ GitHub-style alerts (NOTE, TIP, IMPORTANT, WARNING, CAUTION)
10. ✅ KaTeX math rendering (inline and block)

All of these features work together seamlessly in Astro with the @astrojs/mdx integration, remark-gfm, remark-math, remark-github-blockquote-alert, and rehype-katex plugins configured in astro.config.mjs.

MDX Variables and Expressions

MDX allows you to define and use JavaScript variables within your markdown:

這篇文章由 Gemini 寫於 2025 年。

Footnotes

1. This is the first footnote with some additional information. ↩

2. Footnotes can contain formatted text and even code snippets. ↩