Complete Guide to Markdown & MDX Features

Welcome to the complete documentation for all markdown and MDX features available in this blog.

Table of Contents

• Frontmatter
• Alerts
• Collapsible Sections
• Code Blocks
• Tabbed Code Examples
• Images and Figures
• Enhanced Images
• Video Embeds
• Math Equations
• Quiz System
• Smart Typography
• Emoji Support
• Anchor Links
• Tables
• Blockquotes

Frontmatter

Every blog post starts with YAML frontmatter:

---
author: Your Name
category: Category Name
date: 2024-01-11T00:00:00Z
description: A brief description of your post for SEO
priority: 10
difficulty: Beginner | Intermediate | Advanced
draft: false
# Optional: Set custom reading time
# readingTime: "5 min"
image:
    alt: "Image description"
    src: "/images/path/to/image.webp"
layout: ../../../layouts/BlogPostLayout.astro
prerequisites:
    - Prerequisite 1
    - Prerequisite 2
quiz:
    description: "Test your knowledge"
    questions:
        - o:
            - "Option A"
            - "Correct Answer*"
            - "Option C"
            - "Option D"
          q: "Your question here?"
tags:
    - Tag1
    - Tag2
title: 'Your Post Title'
---

Frontmatter Fields

Alerts

Callout boxes for highlighting important information.

Types: note, tip, warning, important, caution, info

Alert Usage

<Alert type="note" title="Optional Title">
  Your content here...
</Alert>

<Alert type="tip">
  <h4>Custom Title</h4>
  <p>You can customize the title.</p>
</Alert>

Collapsible Sections

Hide/show content on demand.

Collapsible Usage

<Collapsible title="Section Title">
  Hidden content goes here...
</Collapsible>

<Collapsible title="Expanded" defaultCollapsed={false}>
  Open by default...
</Collapsible>

Code Blocks

Standard markdown code blocks with syntax highlighting and copy buttons:

def example_function():
    data = {"key": "value"}
    return data

const greeting = "Hello, World!";
console.log(greeting);

npm install package-name
npm run dev

fn main() {
    println!("Hello, World!");
}

Inline Code

Use backticks for inline code: const variable = value;

Supported Languages

The blog supports syntax highlighting for many languages including:

• JavaScript, TypeScript, Python, Rust, Go
• HTML, CSS, SCSS, JSON, YAML
• Bash, Shell, PowerShell
• SQL, GraphQL
• And many more…

Tabbed Code Examples

Compare code in multiple languages:

# API Request Example
import httpx

async def fetch_data(url: str) -> dict:
    async with httpx.AsyncClient() as client:
        response = await client.get(url)
        return response.json()

# Usage
import asyncio
data = asyncio.run(fetch_data("https://api.example.com/data"))

// API Request Example
async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

// Usage
fetchData('https://api.example.com/data')
  .then(data => console.log(data));

# cURL Example
curl -X GET https://api.example.com/data \
  -H "Accept: application/json"

Placeholder Tabs

# First tab - click to reveal
def hello():
    return "Hello, World!"

// Click another tab to switch
function hello() {
    return "Hello, World!";
}

Images and Figures

Display images with captions and aspect ratios.

<Figure
  src="/path/to/image.jpg"
  alt="Image description"
  caption="Image caption"
  width="500px"
  height="300px"
  ratio="16:9"
  fit="cover"
  align="center"
/>

Parameter Reference

Aspect Ratio Examples

16:9 (Landscape)

Image unavailable

4:3 (Standard)

Image unavailable

1:1 (Square)

Image unavailable

(Auto)

Image unavailable

Enhanced Images

Enhanced images with lightbox, zoom, and lazy loading features.

Image unavailable

EnhancedImage Features

• Lightbox: Click to open full-size image
• Zoom: Hover to see zoom effect
• Lazy Loading: Images load as you scroll
• Error Fallback: Shows placeholder if image fails to load
• Auto Caption: Generates caption from filename if not provided

Usage

<EnhancedImage
  src="/path/to/image.jpg"
  alt="Image description"
  caption="Optional caption"
  width={800}
  height={600}
  loading="lazy"
  priority={false}
/>

Parameter Reference

Video Embeds

Embed YouTube and Vimeo videos.

Usage

<VideoEmbed
  src="https://youtube.com/watch?v=..."
  title="Video Title"
  width="800px"
  ratio="16:9"
  autoplay={false}
  loop={false}
  muted={false}
  controls={true}
/>

Parameter Reference

Video Ratio Examples

16:9 (Standard)

21:9 (Ultrawide)

Math Equations

Write LaTeX math equations with KaTeX support.

Inline Math

Use $...$ for inline math: $E = mc^2$

Block Math

Use $$...$$ for block equations:

Math Examples

Algebra

$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

Calculus

$\frac{d}{dx} e^x = e^x$

Matrices

$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$

Greek Letters

$\alpha, \beta, \gamma, \delta, \epsilon, \pi, \sigma, \omega$

Usage

Inline: $E = mc^2$

Block:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Quiz System

Add interactive quizzes to test reader knowledge. Configure in frontmatter:

Quiz Structure

quiz:
  description: "Test your knowledge"
  questions:
    - o:
        - "Option A"
        - "Correct Answer*"  # Asterisk marks correct answer
        - "Option C"
        - "Option D"
      q: "Question text here?"
    - o:
        - "A"
        - "B*"
        - "C"
        - "D"
      q: "Another question?"
  title: "Quiz Title"

Quiz Question Format

- o:
    - "First option"
    - "Correct answer*"
    - "Third option"
    - "Fourth option"
  q: "Your question goes here?"

quiz:
  description: "Test your understanding of the topic"
  questions:
    - o:
        - "Basic programming"
        - "Advanced AI systems*"
        - "Database management"
        - "Network security"
      q: "What is the primary focus of this guide?"
    - o:
        - "Use alerts sparingly"
        - "Use them for all content"
        - "Highlight important information*"
        - "Replace all headings"
      q: "When should you use alerts?"
  title: "Section Quiz"

Smart Typography

Automatic transformations applied to text:

Examples

• Three dots… become an ellipsis…
• Double dashes—create proper en dashes---
• Triple dashes---render as em dashes
• Smart quotes” for proper typography

Emoji Support

Use standard emoji directly in your content.

Faces & Emotions

😊 😃 😄 😆 😂 😉 😍 👍 👎

Objects & Symbols

🚀 🔥 ⭐ 📚 💻 ⚙️ 🔧 🔔 🔗

Indicators

✅ ❌ ⚠️ ❓ 💡 🏆 🎉

Usage

Welcome to the guide 🚀 Check your configuration ⚠️

Use the check mark ✅ when done, or the X ❌ to cancel.

Anchor Links

Heading links are automatically generated.

Usage

Simply use standard markdown headings:

## Section Title

### Subsection

#### Deep Dive

Hover over any heading to see a link icon. Click to copy the anchor link.

Tables

Create data tables with markdown:

Usage

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Blockquotes

Highlight quoted content:

“The best way to predict the future is to create it.” — Peter Drucker

Usage

> Your quote here
> — Author Name

Quick Reference

All Supported Features Checklist

Happy writing! ✍️