TECHNIQUEJanuary 20265 min read

Example MDX Blog Post
Demonstrating All Features

This example post shows how to use MDX with all available components, markdown syntax, and interactive elements.

Components
12+
Features
All
Format
MDX
Status
Example
TL;DR

MDX enables writing blog content in Markdown → React components work inline → Interactive diagrams and code blocks just work → Author productivity increased

1

Markdown Basics

Standard markdown works seamlessly. You can use bold text, italic text, and inline code.

Lists

  • First item with details
  • Second item with more context
  • Third item wrapping up

Numbered Lists

  1. Step one of the process
  2. Step two continues here
  3. Final step completes

Links and Emphasis

Visit the BreachLogic Academy to learn more about security research.

Blockquotes work too! Use them for important callouts or quotes from sources.

2

Images

Images can be added using standard markdown syntax:

Cybersecurity concept - digital lock and networkCybersecurity concept - digital lock and network

Image Gallery

Use the ImageGallery component for a responsive grid with lightbox support. Click any image to view full size:

Gallery Features
  • Supports mixed vertical and horizontal images
  • Click to open lightbox view
  • Hover to see image caption
  • Responsive grid layout
3

Video Embeds

Embed YouTube videos using the YouTube component. Just pass the video ID:

DEFCON Talk Example

Example YouTube Embed

Usage

jsx
<YouTube id="VIDEO_ID" title="Optional title" />

The component automatically:

  • Maintains 16:9 aspect ratio
  • Responsive on all screen sizes
  • Styled to match the blog theme
4

Code Blocks

Fenced code blocks with syntax highlighting:

javascript
// Example JavaScript code
function analyzePayload(input) {
  const decoded = atob(input);
  const pattern = /malicious|suspicious/gi;
  return pattern.test(decoded);
}

Or use the CodeBlock component directly for more control:

utils.py
# Python example
import hashlib

def hash_indicator(ioc: str) -> str:
  """Generate SHA256 hash of an indicator."""
  return hashlib.sha256(ioc.encode()).hexdigest()
5

UI Components

Callout Variants

Information

This is an informational callout for general notes and tips.

Warning

Use this for important warnings that need attention.

Critical

Critical security issues or breaking changes go here.

Success

Positive outcomes, fixes, or mitigations.

Badges

Use badges inline: CVE-2025-1234 or MALWARE or Patched

6

Interactive Flow Diagram

Step 1 of 4

Author Writes MDX

Content Creator

Author creates an MDX file with frontmatter metadata and content mixing markdown with React components.

---
title: My Post
type: technique
---

# Content here
Frontmatter parsed by gray-matter
7

Screenshot Flow

Use ScreenshotFlow for interactive walkthroughs of UI screenshots. Define crop regions to zoom into specific areas of an image.

Step 1 of 4
Facebook login page walkthrough
Loading...

Full Page View

The Facebook login page with the branding and tagline on the left, and the login form on the right.

VS
Vitaly Simonovich
Senior Security Researcher @ Cato Networks CTRL