Here is the updated test article incorporating the native GitHub Flavored Markdown (GFM) features you requested, including autolinks, a footnote, and the proper task list syntax.

Remember, to see these rendered correctly in your Next.js project, you will need to ensure your parser is using a plugin like remark-gfm!

The Ultimate Website Typography Test

Welcome to the ultimate content formatting test. If you are building a new blog, designing a theme, or just tweaking your CSS, this page will help you ensure everything looks pixel-perfect.

Heading Level 2: The Core Typography

Before we dive into the complex components, let's look at standard paragraph text. Good design requires comfortable reading. This means checking your line height, letter spacing, and font weight.¹

You also need to make sure your inline text decorations stand out appropriately. Here is a sentence with some bold text for emphasis, some italicized text for nuance, and even some strikethrough text to show corrections. You might also want to highlight a variable or an inline code snippet right inside the paragraph.

Additionally, if you drop a bare URL in the text like https://react.dev or https://nextjs.org, your GFM parser should automatically convert it into a clickable link without needing the standard bracket syntax.

Heading Level 3: Organizing Information

When paragraphs aren't enough, we rely on lists to break down information. Ensure your line heights don't collapse when items stack up.

An Unordered List:

• Apples and oranges
• Bananas and strawberries
• Blueberries and raspberries

An Ordered List:

1. Preheat the oven to 180°C.
2. Mix the dry ingredients together.
3. Bake for 25 minutes until golden brown.

Heading Level 4: Quotes and Code

If you run a technical or literary blog, you'll need styled blockquotes to break up the flow and highlight important takeaways from external sources.

"Good design is obvious. Great design is transparent."

— Joe Sparano

And of course, for the developers out there, a well-formatted code block with proper syntax highlighting is non-negotiable.

JavaScript

// A simple function to test your pre and code tags
function greetUser(name) {
  if (!name) {
    return "Hello, stranger!";
  }
  return `Hello, ${name}! Welcome to the test site.`;
}

Heading Level 5: Tables and Data

Sometimes you need to compare data. Tables can be notoriously tricky to style on mobile devices, so make sure to check this on a smaller screen!

Feature	Basic Plan	Pro Plan
Users	1 User	5 Users
Storage	10 GB	100 GB
Support	Email only	24/7 Phone

Heading Level 6: The Final Details

We've reached the bottom of the typographic hierarchy. The H6 is often styled similarly to a highly emphasized paragraph or a sub-caption.

Finally, let's test a functional checklist to see how your form inputs interact with your standard text flow.

Pre-Launch Checklist:

• Check mobile responsiveness
• Validate HTML and CSS
• Test form submissions
• Optimize image sizes

End of test content.

Footnotes

1. Line height is generally recommended to be around 1.5 times the font size for optimal web readability, though this can vary depending on the specific typeface. ↩