Complete Guide to Markdown Features

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

Table of Contents

• Frontmatter
• Alerts
• Collapsible Sections
• Code Blocks
• Tabbed Code Examples
• Images and Figures
• Video Embeds
• Quiz System
• Smart Typography
• Emoji Shortcodes
• Anchor Links

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
priority: 10
difficulty: Beginner | Intermediate | Advanced
draft: false
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?"
    title: "Quiz Title"
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;

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"

Compare code in multiple languages:

# 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

9:16 (Portrait)

Image unavailable

Alignment Examples

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)

4:3 (Standard)

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 Shortcodes

Use :emoji: for consistent emoji display across devices.

Faces & Emotions

Objects & Symbols

Indicators

Usage Example

Welcome to the guide :rocket: Check your configuration :warning:

Use the check mark :check: when done, or the X :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.

Quick Reference

All Supported Features Checklist

Happy writing! ✍️