MDX Feature Showcase - Advanced Components and Formatting Demo

Updated: at 10:30 AM

MDX Feature Showcase

TL;DR

This post demonstrates all custom MDX components available on the blog. Key features include: interactive callouts for warnings and tips, expandable sections for hiding details, step-by-step guides, before/after comparisons, mathematical notation with KaTeX, Mermaid diagrams, and minimal references/changelog components for documentation.

Created for technical documentation, tutorials, and detailed guides.

H2 - Headings & Structure

H3 - Subheading Example

H4 - Example

Organize your content with clear headings and subheadings.

Lists

  • Bullet lists for clarity
  • Numbered steps for instructions
  • Nesting is supported
  1. First step
  2. Second step
  3. Third step

Table Example

FeatureSupported
Markdown✅
MDX Components✅
Math✅
Mermaid Diagrams✅
Copyable Code✅
References✅
Changelog✅
Executive Summary✅

Images

Astro Logo

Inline Code & Code Blocks

Use npm run build to generate a production build.

// Example JavaScript code block
function greet(name) {
  return `Hello, ${name}!`;
}

Math Support

Inline math: E=mc2E = mc^2

Block math:

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

MathBlock Component Demo

Password Entropy Calculation

H=L×log⁡2NH = L \times \log_2 N

where:

  • LL = length of the password
  • NN = number of possible symbols for each character

1. ZU$Xgb8

  • Length (LL): 7
  • Character set: uppercase (26), lowercase (26), digits (10), special characters (let’s assume 32 common symbols)
  • Total possible symbols (NN): 26+26+10+32=9426 + 26 + 10 + 32 = 94

So,

H=7×log⁡294≈7×6.5546≈45.88 bitsH = 7 \times \log_2 94 \approx 7 \times 6.5546 \approx 45.88 \text{ bits}

2. fishwithahat

  • Length (LL): 12
  • Character set: lowercase letters only (26)
  • Total possible symbols (NN): 26

So,

H=12×log⁡226≈12×4.7004≈56.40 bitsH = 12 \times \log_2 26 \approx 12 \times 4.7004 \approx 56.40 \text{ bits}

Conclusion:
Even though fishwithahat is less “complex”, its greater length gives it higher entropy (56.4 bits vs 45.9 bits), making it mathematically more secure against brute-force attacks.

Mermaid Diagrams

V1

graph TD;
    Dev[Developer] -->|writes| Blog[Blog Post]
    Blog -->|published on| Web[Website]
    Web -->|read by| Users[Readers]

V2

%%{init: {'flowchart': {'useMaxWidth': false, 'width': 500, 'padding': 5, 'rankSpacing': 20, 'nodeSpacing': 10}}}%%
graph TD;
    Dev[Developer] -->|writes| Blog[Blog Post]
    Blog -->|published on| Web[Website]
    Web -->|read by| Users[Readers]

V3

%%{init: {'flowchart': {'useMaxWidth': false}}}%%
graph TD;
    Dev[Developer] -->|writes| Blog[Blog Post]
    Blog -->|published on| Web[Website]
    Web -->|read by| Users[Readers]

Callouts

ℹ️ Info

This is an informational callout. Use these to highlight key details.

⚠️ Warning

Warnings can be used to draw attention to important caveats.

💡 Tip

Tips are great for sharing best practices or shortcuts.

⛔ Caution

Use caution callouts for critical warnings or potential issues.

Expandable Sections

Step-by-Step Guide

  1. Install Dependencies
    Run `npm install` in your project directory.
  2. Configure Project
    Edit your `astro.config.mjs` to enable MDX and desired plugins.
  3. Write Your First Post
    Create a new `.mdx` file in your `src/content/blog/` folder.
  4. Use Custom Components
    Leverage callouts, expandable sections, and more for rich content.
    console.log(Hello, world!)

Before/After Comparison

Before
console.log(‘Hello, world!‘)
After
console.log(‘Hello, ByteRon!’)

References Component

The References component provides a minimal, collapsible way to cite sources at the end of posts.

[references] ▸
Documentation:
  1. [1.1]
    Astro Documentation — Official Astro framework docs
  2. [1.2]
    MDX Documentation
Tools & Libraries:
  1. [2.1]
    Tailwind CSS
  2. [2.2]
    Mermaid JS — Diagrams and flowcharts from text

Changelog Component

The Changelog component tracks updates to posts in a clean, minimal format.

[changelog] ▸
2024-06-01:
  • → Initial publication
  • → Added MDX component examples
  • → Included math and diagram support
2024-06-15:
  • → Added References component demo
  • → Added Changelog component demo
  • → Added ExecutiveSummary component demo
  • → Updated table of supported features

This is a demo post showing available components and features. Got suggestions or noticed something missing? Drop a comment.

RO

Ronaldo

BSc Mathematics | MSc Information Security

  • • Technical problem-solver with unusually broad capabilities & interests
  • • I figure things out and get things done
Contact me

Comments

Table of Contents