The Complete Markdown Showcase

markdown guide mdx
Full stack for noobs illustration

This post demonstrates every Markdown feature you can use when writing on this blog. Use it as a reference.

Headings

Third-level heading

Fourth-level heading

Fifth-level heading
Sixth-level heading

Text formatting

This is a regular paragraph with bold text, italic text, and bold italic combined. You can also use strikethrough for deleted content.

Here’s some inline code within a sentence.

Visit Astro’s documentation to learn more about the framework.

Here’s a plain URL as a link: https://salih.dev

Optimized image with the Image component

Full stack for noobs illustration

You can import images and use Astro’s <Image /> component in MDX for automatic optimization.

Blockquotes

The best way to predict the future is to invent it.

— Alan Kay

Nested blockquotes work too:

First level

Second level

Third level

Lists

Unordered list

  • First item
  • Second item
    • Nested item A
    • Nested item B
      • Deeply nested
  • Third item

Ordered list

  1. Step one
  2. Step two
    1. Sub-step A
    2. Sub-step B
  3. Step three

Task list

  • Set up Astro project
  • Configure Tailwind CSS
  • Write more blog posts
  • Add analytics

Code blocks

Inline: use the getCollection() function from Astro.

Fenced code block with syntax highlighting:

interface BlogPost {
  title: string;
  description: string;
  pubDate: Date;
  tags: string[];
}

function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
}

A shell command example:

npm create astro@latest

JSON configuration:

{
  "name": "salih-dev",
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

CSS example:

@theme {
  --color-accent: #6366f1;
  --font-sans: "Montserrat", sans-serif;
}

Tables

FeatureStatusNotes
Blog✅MDX supported
RSS Feed✅Auto-generated
Sitemap✅Via @astrojs/sitemap
Dark Mode✅System + toggle
Search🔜Planned

Horizontal rule

Content above the rule.

Content below the rule.

Footnotes

Here’s a sentence with a footnote1 and another one2.

Definition-style content

Astro : A web framework for content-driven websites.

MDX : Markdown with JSX support, allowing components in your content.

Escaping and special characters

Use backslashes to escape: \*not italic\*, \`not code\`.

Special characters render fine: © 2026 — em dash, “smart quotes”, and ellipsis…

Math-like formatting

The formula is: E = mc²

Subscript and superscript via HTML: H2O and x2.

Keyboard shortcuts

Press Ctrl + Shift + P to open the command palette.

Details / collapsible section

Click to expand

This content is hidden by default. You can put anything here — text, code, even lists:

  • Hidden item one
  • Hidden item two

Abbreviations via HTML

The HTML spec is maintained by the W3C.

That covers the full range of Markdown and HTML features available in MDX blog posts. Use this as a template when writing your own content.

Footnotes

  1. This is the first footnote with additional context. ↩

  2. This is the second footnote. ↩

Back to blog