Introduction

This post demonstrates the new MDX components available for blog posts.

YouTube Embed

You can embed YouTube videos like this:

Code Blocks

Code blocks now have syntax highlighting with expressive-code:

function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to Placify, ${name}`;
}


greet("World");
def calculate_distance(lat1, lon1, lat2, lon2):
    """Calculate distance between two points using Haversine formula."""
    import math
    R = 6371  # Earth's radius in km
    dlat = math.radians(lat2 - lat1)
    dlon = math.radians(lon2 - lon1)
    a = math.sin(dlat/2)**2 + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2)) * math.sin(dlon/2)**2
    c = 2 * math.asin(math.sqrt(a))
    return R * c

Inline code also works: const x = 42; and console.log(x).

Callouts

Image Zoom

Images now support click-to-zoom:

Placify Screenshot

Conclusion

These new components make it easy to create rich, engaging blog posts.